use-url-state
TypeScript icon, indicating that this package has built-in type declarations

1.0.0-alpha.0 • Public • Published

with-url-state

CircleCI codecov Greenkeeper badge Npm

Lifts the state out of a react component and into the url

color-example

This package allows applications to retrieve the state from a react component and appends it to the url.

Installation

To install with npm use

npm install with-url-state --save

To install with yarn use

yarn add with-url-state

Usage

Play with it in CodeSandbox or check out the the example/

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<OwnProps, UrlState>((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 renderprop 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>
    )}
  />
)

Motivation

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 setState with setUrlState!

Readme

Keywords

none

Package Sidebar

Install

npm i use-url-state

Weekly Downloads

3

Version

1.0.0-alpha.0

License

MIT

Unpacked Size

37.2 kB

Total Files

10

Last publish

Collaborators

  • dean177