@jitcoder/usestore
TypeScript icon, indicating that this package has built-in type declarations

1.0.22 • Public • Published

useStore

useStore is a library that allows you to maintain the state of your application globally while being able to use certain parts of the state with hooks.

Parts of the state can be targeted with a path. eg. todo.items

Whenever that key is changed, the appropriate hooks will be called.

In the below example, if store.set('todo.items') is called, it will cause any component that used the useStore hook on key todo.items to be re-rendered.

Example Usage

api.js

import store from '@jitcoder/usestore';

export const getItems = async () => {
  const results = await axios.get('http://localhost:3001/todo');
  store.set('todo.items', results.data || []);
  return results.data;
}

MyComponent.jsx

import React from 'react';
import { useStore } from '@jitcoder/usestore'

const ItemView = () => {
  const [items] = useStore('todo.items', []);
  return (
    <List>
      {
        items.map((i) => {
          return (
            <ListItem>
              <ListItemText primary={i.title} />
              <ListItemIcon>
                <Button onClick={() => deleteItem(i.id)}>
                  <DeleteIcon />
                </Button>
              </ListItemIcon>
            </ListItem>
          )
        })
      }
    </List>
  );
}

/@jitcoder/usestore/

    Package Sidebar

    Install

    npm i @jitcoder/usestore

    Weekly Downloads

    3

    Version

    1.0.22

    License

    ISC

    Unpacked Size

    14.3 kB

    Total Files

    15

    Last publish

    Collaborators

    • jitcoder