# react-update

> Make setState easily and immutably

Latest version **0.4.4** (published 2016-12-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-update
pnpm add react-update
yarn add react-update
bun add react-update
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.4 |
| Published | 2016-12-28 |
| First published | 2016-07-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | jianghai1007@gmail.com |
| Maintainers | jianghai |
| Keywords | react, immutability, utils |

## Links

- npm: https://www.npmjs.com/package/react-update
- Repository: https://github.com/jianghai/react-update
- Homepage: https://github.com/jianghai/react-update#readme
- Issues: https://github.com/jianghai/react-update/issues
- npm.io page: https://npm.io/package/react-update

## Dependencies (2)

- [immutability-helper](https://npm.io/package/immutability-helper.md) ^2.0.0
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.12.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.4 (latest) — 2016-12-28
- 0.4.3 — 2016-12-28
- 0.4.2 — 2016-11-01
- 0.4.1 — 2016-10-26
- 0.3.9 — 2016-09-29
- 0.3.8 — 2016-08-31
- 0.3.7 — 2016-08-03
- 0.3.6 — 2016-08-03
- 0.3.5 — 2016-08-03
- 0.3.4 — 2016-08-03
- 0.3.3 — 2016-08-03
- 0.3.2 — 2016-08-03
- 0.3.1 — 2016-08-01
- 0.3.0 — 2016-08-01
- 0.2.1 — 2016-08-01
- … 12 more at https://npm.io/package/react-update/versions

## README

# react-update

[![build status](https://img.shields.io/travis/jianghai/react-update.svg)](https://travis-ci.org/jianghai/react-update)
[![npm package](https://img.shields.io/npm/v/react-update.svg)](https://www.npmjs.org/package/react-update) 
[![NPM downloads](http://img.shields.io/npm/dm/react-update.svg)](https://npmjs.org/package/react-update)

Make setState easily and immutably.

So, why not use [immutability-helper](https://github.com/kolodny/immutability-helper)?

- No need to call setState manually
- No need to build syntactic sugar like `{x: {y: {$set: 1}}}`, just pass `x.y` and `1`


## Installation

```sh
npm i --save react-update
```


## Todo Demo

```javascript
import update from 'react-update'

class Todos extends Component {

  constructor() {
    super()
    this.update = update.bind(this)
    this.state = {
      text: '',
      items: []
    }
  }

  render() {
    const { text, items } = this.state
    const update = this.update
    return (
      <div>
        <input type="text" value={text} onChange={e => update('set', 'text', e.target.value)} />
        <button onClick={() => update('push', 'items', { text })}>Add</button>
        <ul>
          {items.map((item, i) => {
            return (
              <li key={i}>
                {item.text}
                <button onClick={() => update('splice', 'items', i)}></button>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}
```


## API

### Bind component and execute setState automatically

```javascript
import update from 'react-update'

class App extends Component {
  
  constructor() {
    super()
    this.update = update.bind(this)
    this.state = {
      name: 'John',
      relation: {
        family: 0,
        friend: 1
      },
      honor: ['1', '2', '3']
    }
  }
  
  someUsage() {
    this.update('set', 'name', 'Wall')
    this.update('set', 'relation.family', 1)
    this.update('set', ['relation', 'family'], 0)
    this.update('set', {
      name: 'Jamas', 
      'relation.friend': 0
    })
    this.update('push', 'honor', '4') // ['1', '2', '3', '4']
    this.update('splice', 'honor', 0) // ['2', '3', '4']

    // All above actions just render once and all state has changed.
  }
}
```

### Silent usage

```javascript
import update from 'react-update'

const myData = {x: {y: 0}}
const newData = update(myData, 'set', 'x.y', 1)
console.log(newData) // {x: {y: 1}}
```


## Changelog

### v0.4.0

`2016-10-26`

- Remove console info when state change.
- Add silent usage which would not execute setState automatically.
```js
import update from 'react-update'

const myData = {x: {y: 1}}
const newData = update(myData, 'set', 'x.y', 2)
console.log(newTarget) // {x: {y: 2}}
```

---
_Source: https://npm.io/package/react-update · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._