Quick start
import { useUrlState } from 'react-use-url-state';
import { z } from 'zod';
function MyComponent() {
const { data, setState, isError } = useUrlState(
{
name: z.string(),
age: z.coerce.number(),
birthDate: z.coerce.date().optional(),
},
{ initialState: { name: 'default', age: 0 } },
);
return (
<div>
<button
onClick={() =>
setState({
name: 'my name',
age: 99,
birthDate: new Date('1999-01-01'),
})
}
>
Set state
</button>
{!isError && (
<div>
{data.name}: {data.age} ({data.birthDate})
</div>
)}
{isError && <div>Invalid url params</div>}
</div>
);
}