Skip to content


Bunshi ships with support for React out of the box.

import { useMolecule, ScopeProvider } from "bunshi/react";

Basic API


Use a molecule for the current scope. Will produce a different value depending on the React context it is run in.

import { useMolecule } from "bunshi/react";
import { useSetAtom, useAtomValue } from "jotai";

export const PageComponent = () => {
  const pageAtoms = useMolecule(PageMolecule);

  const setParams = useSetAtom(pageAtoms.setParams);
  const page = useAtomValue(pageAtoms.currentPage);

  return (
      Page: {page}
      <br />
      <button onClick={() => setParams({ date: })}>
        Set current time

By default useMolecule will provide a molecule based off the implicit scope from context. You can override this behaviour by passing options to useMolecule.

  • withScope - will overide a scope value
  • withUniqueScope - will override a scope value with a new unique value
  • exclusiveScope - will override ALL scopes

Instead of a scope provider, you can use an explicit scope when using a molecule. This can simplify integrating with other libraries.

Implicit scope:

const App = () => (
  <ScopeProvider scope={UserScope} value={""}>
    <UserComponent />

Explicit scope:

useMolecule(UserMolecule, { withScope: [UserScope, ""] });


Provides a new value for Scope, similar to React Context. This will create new molecules in the react tree that depend on it.

import { ScopeProvider } from "bunshi/react";

const App = () => (
  <ScopeProvider scope={UserScope} value={""}>
    <UserComponent />
  • scope the MoleculeScope reference to provide
  • value a new value for that scope