MoleculeProvider

MoleculeProvider<T>(props): ReturnType< React.FC >

Provides the implementation of a molecule interface for all molecules lower down in the React component tree.

Type parameters

Parameter	Description
T	the type of object that will be provided by this the molecule interface

Parameters

Parameter	Type
props	MoleculeProviderProps< T >

Returns

ReturnType< React.FC >

Source

src/react/MoleculeProvider.tsx:44

Example

import { molecule, moleculeInterface } from "bunshi/vanilla";
import { MoleculeProvider, useMolecule } from "bunshi/react";

// Define a molecule interface and a component that uses it
export const NumberMoleculeInterface = moleculeInterface<number>();
function DisplayNumber() {
  const number = useMolecule(NumberMoleculeInterface);
  return <div>{number}</div>;
}

// Define a molecule that implements the interface and provides it
const RandomNumberMolecule = molecule<number>(() => Math.random());
function App() {
  return (
    <MoleculeProvider interface={NumberMoleculeInterface} value={RandomNumberMolecule}>
      <DisplayNumber />
    </MoleculeProvider>
  );
}