Bunshi (formerly jotai-molecules)

• Documentation

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:

• jotai atoms
• valtio proxies
• zustand stores
• nanostores
• vue reactive

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