Easy access to URL params in React.
- Numbers, dates, booleans, and arrays in URL params.
- Type-safety with Zod 3.x and 4.x
https://example.com/?text=query&number=10&date=2023-11-29T13%3A52%3A50.230Z<=>
{ text: 'query', number: 10, date: new Date('2023-11-29T13:52:50.230Z') }
npm i react-use-url-state zod💬 It's important to use
.coerceon your Zod schema to ensure that the values are parsed correctly from the URL.
function MyComponent() { const { data, setState, setValue, setValues, isError, error } = useUrlState( z.object({ name: z.string(), age: z.coerce.number(), birthDate: z.coerce.date().optional(), }), ); return <div> <Button onClick={() => { setState({ name: 'test', age: 10, birthDate: new Date() }); }} > Set state </Button> <Button onClick={() => { setValue('age', data.age + 1); }} > Increment age </Button> <pre>{JSON.stringify(data, null, 2)}</pre> </div> }