remix-utils-rt
Version:
This package contains simple utility functions to use with [React Router](https://reactrouter.com/home).
56 lines • 1.72 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
let context = React.createContext(null);
/**
* Save the Authenticity Token into context
* @example
* // Add `<AuthenticityTokenProvider>` wrapping your Outlet
* let { csrf } = useLoaderData<typeof loader>();
* return (
* <AuthenticityTokenProvider token={csrf}>
* <Outlet />
* </AuthenticityTokenProvider>
* )
*/
export function AuthenticityTokenProvider({ children, token, }) {
return _jsx(context.Provider, { value: token, children: children });
}
/**
* Get the authenticity token, this should be used to send it in a submit.
* @example
* let token = useAuthenticityToken();
* let submit = useSubmit();
* function sendFormWithCode() {
* submit(
* { csrf: token, ...otherData },
* { action: "/action", method: "post" },
* );
* }
*/
export function useAuthenticityToken() {
let token = React.useContext(context);
if (!token)
throw new Error("Missing AuthenticityTokenProvider.");
return token;
}
/**
* Render a hidden input with the name csrf and the authenticity token as value.
* @example
* // Default usage
* return (
* <Form action="/login" method="post">
* <AuthenticityTokenInput />
* <input name="email" type="email" />
* <input name="password" type="password" />
* <button type="submit">Login</button>
* </Form>
* );
* @example
* // Customizing the name
* <AuthenticityTokenInput name="authenticity_token" />
*/
export function AuthenticityTokenInput({ name = "csrf", }) {
let token = useAuthenticityToken();
return _jsx("input", { type: "hidden", value: token, name: name });
}
//# sourceMappingURL=authenticity-token.js.map