Lifts the state out of a react component and into the url
There is a hook based api available on the 3.0.0 branch, published as a beta on npm.
To install with npm use
npm install with-url-state --save
To install with yarn use
yarn add with-url-state
Check out the the demo view the code or play with it in CodeSandbox.
Using javascript
import React from 'react' import { withUrlState } from 'with-url-state' const enhance = withUrlState(props => ({ color: 'blue' })) export const UrlForm = enhance(props => ( <div className="UrlForm"> <div className="current-state" style={{ backgroundColor: props.urlState.color }}> <div>{props.urlState.color}</div> </div> <div className="color-buttons"> <button className="Red" onClick={() => props.setUrlState({ color: 'red' })}> Red </button> <button className="Green" onClick={() => props.setUrlState({ color: 'green' })}> Green </button> <button className="Blue" onClick={() => props.setUrlState({ color: 'blue' })}> Blue </button> </div> </div> ))Using typescript
import React from 'react' import { withUrlState, UrlStateProps } from 'with-url-state' type OwnProps = {} type UrlState = { color: string } const enhance = withUrlState<UrlState, OwnProps>((prop: OwnProps) => ({ color: 'blue' })) export const UrlForm = enhance((props: OwnProps & UrlStateProps<UrlState>) => ( <div className="UrlForm"> <div className="current-state" style={{ backgroundColor: props.urlState.color }}> <div>{props.urlState.color}</div> </div> <div className="color-buttons"> <button className="Red" onClick={() => props.setUrlState({ color: 'red' })}> Red </button> <button className="Green" onClick={() => props.setUrlState({ color: 'green' })}> Green </button> <button className="Blue" onClick={() => props.setUrlState({ color: 'blue' })}> Blue </button> </div> </div> ))Using the render-prop component
import React from 'react' import { UrlState } from 'with-url-state' type OwnProps = {} type UrlState = { color: string } export const UrlForm = (props: OwnProps) => ( <UrlState initialState={{ color: 'green' }} render={({ setUrlState, urlState }) => ( <div className="UrlForm"> <div className="current-state" style={{ backgroundColor: urlState.color }}> <div>{urlState.color}</div> </div> <div className="color-buttons"> <button className="Red" onClick={() => setUrlState({ color: 'red' })}> Red </button> <button className="Green" onClick={() => setUrlState({ color: 'green' })}> Green </button> <button className="Blue" onClick={() => setUrlState({ color: 'blue' })}> Blue </button> </div> </div> )} /> )with-url-state automates the query parameter manipulations, simplifying URL sharing for search results, querying data or tracking a visible portion of a map.
The api provided is:
- based on higer-order-components which makes it composable and testable
- has a render-prop alternative for convenience
- type-safe thanks to Typescript
- very similar to Reacts built in state apis, so converting a component which already manages state is usually as simple as replacing
setStatewithsetUrlState!
For use in IE11 you will need https://github.com/kumarharsh/custom-event-polyfill and add import 'custom-event-polyfill'; if (typeof Event !== 'function') { window.Event = CustomEvent; } to the upper scope of your application.