packages/method-override-middleware/README.md
Method override middleware for Remix. It allows HTML forms to simulate PUT, PATCH, and DELETE requests using a hidden form field.
npm i remix
This middleware runs after the formData middleware and updates the request context's context.method with the value of the method override field. This is useful for simulating RESTful API request methods like PUT and DELETE using HTML forms.
import { createRouter } from 'remix/fetch-router'
import { formData } from 'remix/form-data-middleware'
import { methodOverride } from 'remix/method-override-middleware'
let router = createRouter({
// methodOverride must come AFTER formData middleware
middleware: [formData(), methodOverride()],
})
router.delete('/users/:id', async (context) => {
let userId = context.params.id
// Delete user logic...
return new Response('User deleted')
})
In your HTML form:
<form method="POST" action="/users/123">
<input type="hidden" name="_method" value="DELETE" />
<button type="submit">Delete User</button>
</form>
You can customize the name of the method override field by passing a fieldName option to the methodOverride() middleware.
let router = createRouter({
middleware: [formData(), methodOverride({ fieldName: '__method__' })],
})
<form method="POST" action="/users/123">
<input type="hidden" name="__method__" value="PUT" />
<button type="submit">Update User</button>
</form>
fetch-router - Router for the web Fetch APIform-data-middleware - Required for parsing form dataSee LICENSE