How to use use-location-state - 6 common examples
To help you get started, we’ve selected a few use-location-state examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
xiel / use-location-state / src / examples / use-location-state / src / components / QueryStateCheckbox.tsx View on Github 
export default memo(function QueryStateCheckbox({ name = 'active', method }: Props) {
const [active, setActive] = useQueryState(name, false)
return (
<label>
<input checked="{active}" type="checkbox"> setActive(!active, { method })} />
{name} {method && `(method: ${method})`}
</label>
)
})
export default function QueryStateDemo() {
const [name, setName] = useQueryState('name', 'Sarah')
const [age, setAge] = useQueryState('age', 25)
const [date, setDate] = useQueryState('date', new Date('2019-01-01'))
const [active] = useQueryState('active', false)
return (
<div>
<h2>Intro</h2>
<h4>name</h4></div>export default function QueryStateDemo() {
const [name, setName] = useQueryState('name', 'Sarah')
const [age, setAge] = useQueryState('age', 25)
const [date, setDate] = useQueryState('date', new Date('2019-01-01'))
const [active] = useQueryState('active', false)
return (
<div>
<h2>Intro</h2>
</div>export default function ArrayDemo() {
const [tags, setTags] = useQueryState('tags', defaultTags)
const toggleTag: ChangeEventHandler = e => {
const tag = e.target.value
if (tags.includes(e.target.value)) {
setTags(tags.filter(t => t !== tag))
} else {
setTags([...tags, tag])
}
}
return (
<div>
<h2>Array Demo</h2>
<form>
<label>
</label></form></div>export default function QueryStateDemo() {
const [name, setName] = useQueryState('name', 'Sarah')
const [age, setAge] = useQueryState('age', 25)
const [date, setDate] = useQueryState('date', new Date('2019-01-01'))
const [active] = useQueryState('active', false)
return (
<div>
<h2>Intro</h2>
<h4>name</h4>
<fieldset></fieldset></div>export default function QueryStateDemo() {
const [name, setName] = useQueryState('name', 'Sarah')
const [age, setAge] = useQueryState('age', 25)
const [date, setDate] = useQueryState('date', new Date('2019-01-01'))
const [active] = useQueryState('active', false)
return (
<div>
<h2>Intro</h2>
</div>use-location-state
react hook to the browsers location query state
