# use-simple-plus-persisted-state

> Alternative of Redux for state management and state persistance.

Latest version **1.1.2** (published 2021-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-simple-plus-persisted-state
pnpm add use-simple-plus-persisted-state
yarn add use-simple-plus-persisted-state
bun add use-simple-plus-persisted-state
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-09-10 |
| First published | 2021-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | basitk41 |
| Maintainers | basitk41 |

## Links

- npm: https://www.npmjs.com/package/use-simple-plus-persisted-state
- Repository: https://github.com/basitk41/use-simple-plus-persisted-state
- Homepage: https://github.com/basitk41/use-simple-plus-persisted-state#readme
- Issues: https://github.com/basitk41/use-simple-plus-persisted-state/issues
- npm.io page: https://npm.io/package/use-simple-plus-persisted-state

## Recent versions

- 1.1.2 (latest) — 2021-09-10

## README

# use-simple-plus-persisted-state

> Alternative of Redux for state management and state persistance.

[![NPM](https://img.shields.io/npm/v/use-simple-plus-persisted-state.svg)](https://www.npmjs.com/package/use-simple-plus-persisted-state) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save use-simple-plus-persisted-state
```

OR

```bash
npm install --save use-simple-plus-persisted-state --force
```

## Usage

This is how you import and use it like normal useState hook.<br />

```jsx
import React, { Component } from "react";

import { useSimpleState } from "use-simple-plus-persisted-state";

const Example = () => {
  const [example, setExample] = useSimpleState({ name: "Basit" });
  return <div>{example.name}</div>;
};
```

But the interesting is that you can use this state anywhere in app without passing to any component.<br />
All you need is just to call this hook there and pull out state there and use it.<br />
App.js

```jsx
import React, { Component } from "react";

import { useSimpleState } from "use-simple-plus-persisted-state";

const Example = () => {
  const [example, setExample] = useSimpleState({ name: "Basit" });
  return <div>{example.name}</div>;
};
```

anyothercomponent.js

```jsx
import React, { Component } from "react";

import { useSimpleState } from "use-simple-plus-persisted-state";

const Example = () => {
  const [example, setExample] = useSimpleState();
  return <div>{example.name}</div>;
};
```

but in any other component in which you need to use which is lower in order, hook dont need any parameter.<br />

```jsx
import React, { Component } from "react";

import { usePersist } from "use-simple-plus-persisted-state";

const Example = () => {
  const [example, setExample] = usePersist({ name: "Basit" });
  return <div>{example.name}</div>;
};
```

usePersist is same as useSimpleState but it will persist your data.

# example

Here an example app
App.js

```js
import { useState } from "react";
import { useSimpleState, usePersist } from "use-simple-plus-persisted-state";
import "./App.css";
import Child1 from "./Components/Child1";
import Child2 from "./Components/Child2";
const App = () => {
  // this is for simple use like redux.
  const [users, setUser] = useSimpleState([{ name: "basit" }]);
  // this is for data persistancy.
  // const [users, setUser] = usePersist([{ name: "basit" }]);
  const [name, setName] = useState();
  const submitHandler = () => {
    const copy = [...users];
    copy.push({ name });
    setUser(copy);
    setName("");
  };
  return (
    <div className="App container">
      <div className="row">
        <h1>Name</h1>
        <div className="col-sm-5"></div>
        <div className="col-sm-2" style={{ textAlign: "right" }}>
          <div class="d-grid gap-2">
            <input
              type="text"
              className="form-control"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <button
              class="btn btn-primary"
              type="button"
              onClick={submitHandler}
            >
              Add
            </button>
          </div>
        </div>
      </div>
      <br />
      <div className="row">
        <div className="col-sm-4">
          <h1>Parent State</h1>
          <table className="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              {users.map((user) => {
                return (
                  <tr>
                    <td>{user.name}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        <div className="col-sm-4">
          <Child1 />
        </div>
        <div className="col-sm-4">
          <Child2 />
        </div>
      </div>
    </div>
  );
};

export default App;
```

Child1.js

```js
import { useSimpleState } from "use-simple-plus-persisted-state";
const Child1 = () => {
  const [users] = useSimpleState();
  return (
    <div>
      <h1>Child 1 State</h1>
      <table className="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => {
            return (
              <tr>
                <td>{user.name}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default Child1;
```

Child2.js

```js
import { useSimpleState } from "use-simple-plus-persisted-state";
const Child2 = () => {
  const [users] = useSimpleState();
  return (
    <div>
      <h1>Child 2 State</h1>
      <table className="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => {
            return (
              <tr>
                <td>{user.name}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default Child2;
```

## License

MIT © [basitk41](https://github.com/basitk41)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).

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