# mutable-state

> A tiny wrapper that let's you use `reactjs useState hook` like a mutable object

Latest version **1.1.0** (published 2019-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install mutable-state
pnpm add mutable-state
yarn add mutable-state
bun add mutable-state
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-01-27 |
| First published | 2019-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | @iamruhul |
| Maintainers | iamruhul |
| Keywords | reactjs, useState, mutable, immutable, state-management, react-state-management, wrapper, react-hooks, react-hooks-wrapper, mutable-state, mutable-react-state |

## Links

- npm: https://www.npmjs.com/package/mutable-state
- Repository: https://github.com/iamruhul/mutable-state
- Homepage: https://github.com/iamruhul/mutable-state#readme
- Issues: https://github.com/iamruhul/mutable-state/issues
- npm.io page: https://npm.io/package/mutable-state

## Dependencies (1)

- [observable-slim](https://npm.io/package/observable-slim.md) 0.1.5

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2019-01-27
- 1.0.10 — 2019-01-27
- 1.0.9 — 2019-01-26
- 1.0.8 — 2019-01-26
- 1.0.7 — 2019-01-26
- 1.0.6 — 2019-01-26
- 1.0.5 — 2019-01-26
- 1.0.4 — 2019-01-25
- 1.0.3 — 2019-01-25
- 1.0.2 — 2019-01-25
- 1.0.1 — 2019-01-25
- 1.0.0 — 2019-01-25

## README

# [Mutable State](https://github.com/iamruhul/mutable-state)

[![npm (scoped)](https://img.shields.io/bundlephobia/min/mutable-state.svg)](https://www.npmjs.com/package/mutable-state)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/minzip/mutable-state.svg)](https://www.npmjs.com/package/mutable-state)
[![npm version](https://img.shields.io/npm/v/mutable-state.svg)](https://www.npmjs.com/package/mutable-state)

Update reactjs state just like you update a literal object.. literally mutable-state

## Requirements

You need react hooks to use this library which is not available in the current stable build 16.7.0. You may need to install the alpha version of reactjs and reactDOM

## Installation

```
$ npm install mutable-state

OR Yarn

$ yarn add mutable-state
```

## Usage

```jsx
import React from "react";
import useMutableState from "mutable-state";

export default function() {
  // just pass in the state
  let state = useMutableState({
    shoe: {
      count: 0,
      alsoArray: [["name", "ruhul"], ["multiDimensional", true]],
      deep: {
        veryDeep: true
      }
    },
    penCount: 1
  });

  // WAYS TO UPDATE THE STATE
  const way1 = () => (state.shoe.count += 1);
  const way2 = () => (state = { shoe: { count: state.shoe.count - 1 } }); // it's cool right? (:

  const way3 = () => (state.penCount += 1);

  return (
    <div>
      <h1>shoe size: {state.shoe.count}</h1>
      <button onClick={() => (state.shoe.count += 1)}>Increment</button>
    </div>
  );
}
```

### **NOTCE :** Using ES6+ destructuring you can only `get` the value, you can't `set` it, as this is the standard behaviour.

```js
const { size } = useMutableState({ size: 0 });
// YOU CAN DO THIS
size; //=> 0

// BUT NOT THIS ->
size = 2; // NOPE .... THE STATE ISN'T UPDATED BCZ DESTRUCTURING ONLY COPIES THE `VALUE` NOT THE `SETTER`

// BUT YOU CAN DO THIS
const { shoe } = useMutableState({
  shoe: {
    size: 0
  }
});

shoe.size = 12; // YUP

// SAD BUT THAT'S HOW IT'S IMPLEMENTED IN ALL THE BROWSERS
```

#### Please ⭐ the project and share it so people can benefit from this
https://github.com/iamruhul/mutable-state

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