Skip to content

Molecule pattern for jotai, valtio, zustand, nanostores, xstate, react and vue

License

Notifications You must be signed in to change notification settings

saasquatch/bunshi

Repository files navigation

Jotai (light mode)

Bunshi (formerly jotai-molecules)

A tiny, fast, dependency-free 3kb library for creating states stores and other dependencies that lets you lift state up or push state down. Works out of the box with React, Vue and vanilla javascript and Typescript.

Definition: Bunshi (分子 / ぶんし) - Japanese for molecule, member or element.

Works well with state solutions like:

Comes out of the box with support for:

  • React
  • Vue
  • Vanilla Javascript & Typescript

See the docs for more details on why we created this library and how to use it.

Inspired by jotai and guice.

Installation

This module is published on NPM as bunshi

npm i bunshi

Documentation

Check out the docs on bunshi.org.

Migrating from jotai-molecules

Coming from an older version of jotai-molecules? The core API and functionality is the same, but bunshi no longer assumes react as the default use case.

import { atom } from "jotai"
- import { molecule, useMolecule } from "jotai-molecules"
+ import { molecule, useMolecule } from "bunshi/react"

const countMolecule = molecule(()=>atom(0));

const Counter = ()=>{

    const [count,setCount] = useAtom(useMolecule(countMolecule));

    return <div>
        Count is {count}
        <button onClick={()=>setCount(c=>c+1)}>Increment</button>
    </div>
}