feather-state-react v1.0.4

Feather State React

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

Live examples:

• Feather To-Do app (React)

Companion frameworks:

• State - feather-state
• Render - feather-render

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>
  );
};

Roadmap 🚀

• Minified version via CDN
• Cleaner way of referencing values in render