Feather-state-react NPM

Feather State React

✨ A feather light state framework for React ✨ 212 bytes minified and gzipped - extends feather-state

Companion frameworks:

Live examples:

Feather To-Do app (React)

Getting started

npm i feather-state-react

Usage

import { useStore } from 'feather-state-react';

const Component = () => {
  const { sync, watch } = useStore(todoStore);

  watch(todoStore, 'todos', (next, prev) => {
    console.log(next, prev);
  });

  return (
    <p>{sync(todoStore.todos[0], 'title')}</p>
  );
};

Documentation

`store()`

store(state) => { state, watch() } | { ...state, watch() };

Parameters

state: state value

Return values

state | ...state - state value
watch() - watch for shallow mutations

`useStore()`

useStore(store) => { sync(), watch() };

Parameters

store - return value from store()

Return values

sync() - re-render DOM when value changes
watch() - watch for shallow mutations

`useStore().sync()`

sync(parent, key) => value;

Parameters

parent - parent object of watched value
key - key of watched value

Return values

value - value of parent[key]

`useStore().watch()`

watch(parent, key, callback) => unwatch();

Parameters

parent - parent object of watched value
key - key of watched value
callback() - function called when value changes

Return values

unwatch() - function to unwatch value (Note: values are also automatically unwatched when component unmounts)

Example

todos.ts

import { store } from 'feather-state-react';

export const todoStore = store({
  completedCount: 1,
  todos: [{
    id: 123,
    title: 'Todo 1',
    done: true
  }, {
    id: 456,
    title: 'Todo 2',
    done: false
  }]
});

const updateCompletedCount = () => {
  todoStore.completedCount = todoStore.todos.filter(todo => todo.done).length;
};

TodoList.ts

import { useStore } from 'feather-state-react';
import { todoStore, updateCompletedCount } from './todos';
import { TodoItem } from './TodoItem';

const TodoList = () => {
  const { sync, watch } = useStore(todoStore);

  watch(todoStore, 'todos', () => {
    updateCompletedCount();
  });

  return (
    <>
      <ul>
        {sync(todoStore, 'todos').map((todo) => (
          <TodoItem key={todo.id} todo={todo} />
        ))}
      </ul>
      <p>Completed: {sync(todoStore, 'completedCount')}</p>
    </>
  );
};

TodoItem.ts

import { useStore } from 'feather-state-react';
import { todoStore, updateCompletedCount } from './todos';

const TodoItem = ({ todo }) => {
  const { watch } = useStore(todoStore);

  watch(todo, 'done', () => {
    updateCompletedCount();
  });

  return (
    <li>{todo.title}</li>
  );
};