remix-utils-rt
Version:
This package contains simple utility functions to use with [React Router](https://reactrouter.com/home).
34 lines • 1.23 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from "react";
import { useSearchParams } from "react-router";
/**
* Include existing query params as hidden inputs in a form.
*
* @example
* A pagination bar that does not clear the search query
* ```tsx
* <Form>
* <ExistingSearchParams exclude={['page']} />
* <button type="submit" name="page" value="1">1</button>
* <button type="submit" name="page" value="2">2</button>
* <button type="submit" name="page" value="3">3</button>
* </Form>
* ```
*
* @example
* A search form that clears the page param
* ```tsx
* <Form>
* <ExistingSearchParams exclude={['q', 'page']} />
* <input type="search" name="q" />
* </Form>
* ```
*/
export function ExistingSearchParams({ exclude, ...props }) {
const [searchParams] = useSearchParams();
const existingSearchParams = [...searchParams.entries()].filter(([key]) => !exclude?.includes(key));
return (_jsx(_Fragment, { children: existingSearchParams.map(([key, value]) => {
return (_jsx("input", { ...props, type: "hidden", name: key, value: value }, `${key}=${value}`));
}) }));
}
//# sourceMappingURL=existing-search-params.js.map