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.

• Host: GitHub
• URL: https://github.com/sin/react-immer-hooks
• Owner: sin
• License: mit
• Created: 2018-10-27T02:58:47.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-27T03:02:00.000Z (about 6 years ago)
• Last Synced: 2024-10-12T23:11:45.797Z (2 months ago)
• Topics: copy-on-write, immer, react, react-hooks
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-immer-hooks
• Size: 20.5 KB
• Stars: 45
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-immer-hooks`
• awesome-react-hooks-cn - `react-immer-hooks`
• awesome-list - react-immer-hooks
• awesome-react-hooks - `react-immer-hooks`
• awesome-react-hooks - `react-immer-hooks`

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