|
| 1 | +import { type JSONCompatible } from '../../utils'; |
| 2 | +/** |
| 3 | + * Astro hook, for React islands. Returns `urlState`, `setState`, and `setUrl` functions |
| 4 | + * |
| 5 | + * Astro has no client-side router by default, so the URL is written with |
| 6 | + * `window.history` and read back on back/forward, on this hook's own writes, |
| 7 | + * and on any other `pushState`/`replaceState`, `<ClientRouter />` included. |
| 8 | + * Islands on one page share the state. |
| 9 | + * |
| 10 | + * @param {JSONCompatible<T>} [defaultState] Fallback (default) values for state |
| 11 | + * @param {Object} params - Object with other parameters |
| 12 | + * @param {boolean} params.replace replace URL or push, default `true` |
| 13 | + * @param {?object} params.searchParams `Object.fromEntries(Astro.url.searchParams)`, passed as an island prop so the server render matches the URL |
| 14 | + * @returns {Object} [result] State and callbacks |
| 15 | + * @returns {Object} [result.urlState] - current state object |
| 16 | + * @returns {Function} [result.setUrl] - function to update state and url |
| 17 | + * @returns {Function} [result.setState] - function to update state only |
| 18 | + * @returns {Function} [result.reset] - function to reset state and url to default |
| 19 | + * |
| 20 | + * * Example: |
| 21 | + * ```ts |
| 22 | + * export const form = { name: '', age: 0 }; |
| 23 | + * // island: <Form client:load searchParams={Object.fromEntries(Astro.url.searchParams)} /> |
| 24 | + * const { urlState, setState, setUrl, reset } = useUrlState(form, { searchParams }); |
| 25 | + * |
| 26 | + * setState({ name: 'test' }); |
| 27 | + * setUrl({ name: 'test' }, { replace: false }); |
| 28 | + * setUrl(curr => ({ ...curr, name: 'test' })); |
| 29 | + * // RESET state and url |
| 30 | + * setUrl((_curr, initialState) => initialState); |
| 31 | + * // Or |
| 32 | + * reset(); |
| 33 | + * reset({ replace: false }); |
| 34 | + * ``` |
| 35 | + * |
| 36 | + * * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/astro/useUrlState} |
| 37 | + */ |
| 38 | +export declare function useUrlState<T extends JSONCompatible>(defaultState: T, params?: Params): { |
| 39 | + /** |
| 40 | + * State object. Don't mutate directly, use `setState` or `setUrl` |
| 41 | + */ |
| 42 | + urlState: T; |
| 43 | + /** |
| 44 | + * * Example: |
| 45 | + * ```ts |
| 46 | + * setState({ name: 'test' }); |
| 47 | + * // or |
| 48 | + * setState(curr => ({ ...curr, name: 'test' }) ); |
| 49 | + * ``` |
| 50 | + * |
| 51 | + * * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/astro/useUrlState#setstate} |
| 52 | + */ |
| 53 | + setState: (value: Partial<T> | ((currState: T, initial: T) => T)) => void; |
| 54 | + /** |
| 55 | + * * Example: |
| 56 | + * ```ts |
| 57 | + * setUrl({ name: 'test' }); |
| 58 | + * // or |
| 59 | + * setUrl((curr) => ({ ...curr, name: 'test' }), { replace: false } ); |
| 60 | + * * Reset |
| 61 | + * setUrl((_curr, initialState) => initialState, { replace: false } ); |
| 62 | + * ``` |
| 63 | + * |
| 64 | + * * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/astro/useUrlState#seturl} |
| 65 | + */ |
| 66 | + setUrl: (value?: Partial<T> | ((currState: T, initialState: T) => T), options?: Options) => void; |
| 67 | + /** |
| 68 | + * * Example: |
| 69 | + * ```ts |
| 70 | + * reset(); |
| 71 | + * // or |
| 72 | + * reset({ replace: false }) |
| 73 | + * ``` |
| 74 | + * |
| 75 | + * * Docs {@link https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/astro/useUrlState#reset} |
| 76 | + */ |
| 77 | + reset: (options?: Options) => void; |
| 78 | +}; |
| 79 | +export type Options = { |
| 80 | + replace?: boolean; |
| 81 | +}; |
| 82 | +export type Params = { |
| 83 | + searchParams?: object; |
| 84 | + replace?: boolean; |
| 85 | +}; |
0 commit comments