README.md

Integration for React (functional components style) of statemanjs.

Table of Contents

• API
• Usage
• For contributors

API

Here is a detailed view of the API:

/**
 * Make the react component observe the statemanjs.
 * In the options, you can specify information about the observer,
 * as well as specify the condition under which the observer will be notified.
 *
 * @param statemanjs Statemanjs to observe.
 * @param subscriptionOptions Additional information and notification condition.
 * @returns Reactive state.
 */
function useStatemanjs<T>(
    statemanjs: StatemanjsAPI<T>,
    subscriptionOptions?: SubscriptionOptions<T>,
): T;

Usage

npm i statemanjs statemanjs-react

import { createState } from "statemanjs";
import { useStatemanjs } from "statemanjs-react";

const counterState = createState(0);

function Component() {
    const counter = useStatemanjs(counterState);

    const onClick = () => {
        counterState.set(counter + 1);
    };

    return (
        <div>
            <button onClick={onClick}>Click me</button>
            <p>Count of clicks {counter}</p>
        </div>
    );
}

Detailed information about statemanjs can be found here.

For contributors

See CONTRIBUTING.md.