useQueryState
The fastest way to use Query String as State
View Demo
Prerequisite
- react ^16.8.0
- react-router-dom ^5.1.0
Install
npm install use-query-state
Usage
just like
setState
Basic
; const App = { const name setName = ; return <div> name </div> ;}
Advanced
; const App = { const input setInput = ; const onInputChange = { ; }; return <div> <input type="text" value=input onChange=thishandleChange /> </div> ;}
API
DefaultValue
, QueryParamName
, Options?
): [Value
, Setter
]
useQueryState(DefaultValue
- Type:
string
|boolean
|number
|string[]
- Required:
true
- Description: the value is used when query parameter is
undefined
QueryParamName
- Type:
string
- Required:
true
- Description: the valued is used as the query parameter name
Options
- Type:action?: 'push' | 'replace'delay?: number
- Required:
false
- Description:
action
is defining how to mutate the history state.action
defaults to'push'
.delay
is defining the debounce wait time for mutating the history state when usingSetter
.delay
defaults to0
.
Value
- Type:
string
|boolean
|number
|string[]
|undefined
|null
- Description: the returned value for read
Setter
- Type:
(value: Value): void
- Description: The setter used for setting the state
License
MIT