Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/sin/react-immer-hooks

Easy immutability in React Hooks with Immer.
https://github.com/sin/react-immer-hooks

copy-on-write immer react react-hooks

Last synced: about 2 months ago
JSON representation

Easy immutability in React Hooks with Immer.

Lists

README 

        
# React Immer Hooks



> Easy immutability in [React Hooks](https://reactjs.org/docs/hooks-intro.html) with [Immer](https://github.com/mweststrate/immer).



**Note:** _React Hooks are currently a [RFC proposal](https://github.com/reactjs/rfcs/pull/68) which may be subject to change. You'll need at least `[email protected]` to use this feature._



## Installation



`yarn add react-immer-hooks`



## Usage



##### useImmerState(initialState)



```jsx

import { useImmerState } from 'react-immer-hooks'



const initialState = {

  clicks: 0,

  doubleClicks: 0

}



const ClickCounters = () => {

  const [ state, setState ] = useImmerState(initialState)



  const onClick = () => setState(draft => { draft.clicks++ })

  const onDoubleClick = () => setState(draft => { draft.doubleClicks++ })



  return (

    <>

      

        Clics: {state.clicks}, Double clicks: {state.doubleClicks}

      

    >

  )

}

```



##### useImmerReducer(reducer, initialState)



```jsx

import { useImmerReducer } from 'react-immer-hooks'



const initialState = {

  count: 0

}



const reducer = (draft, action) => {

  if (action.type === 'INCREMENT') draft.count++

  if (action.type === 'DECREMENT') draft.count--

  if (action.type === 'ADD') draft.count += action.payload

}



const Counter = () => {

  const [ state, dispatch ] = useImmerReducer(reducer, initialState)



  return (

    <>

      Count: {state.count}

       dispatch({ type: 'INCREMENT'})}>

        Increment

      

       dispatch({ type: 'DECREMENT'})}>

        Decrement

      

       dispatch({ type: 'ADD', payload: 5})}>

        Add 5

      

    >

  )

}

```



## License



MIT License