use-simple-plus-persisted-state v1.1.2

use-simple-plus-persisted-state

Alternative of Redux for state management and state persistance.

Install

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

OR

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

Usage

This is how you import and use it like normal useState hook.

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. All you need is just to call this hook there and pull out state there and use it. App.js

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

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.

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

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

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

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

This hook is created using create-react-hook.