About

This package is React bindings for ATLAS state management system.

Functional components binding

Methods

useAtlas(...nodes: string[])

Hook to connect your functional React components to ATLAS state management. Component will rerender after any ATLAS update if no node paths were passed. Otherwise, component will rerender only if given nodes (or their nested nodes) is updated.

There is one unobvious moment about this hook. You are able to update any ATLAS node from any component without bindings. This binding is only used for rerendering component after required nodes were updated (or ATLAS state was updated in generic if no nodes were passed).

Example

import React from "react";
import { PrimitiveNode } from "@farsoc/entity-atlas-nodes";
import { useAtlas } from "@farsoc/atlas-react";

const counter = new PrimitiveNode<number>({ initialValue: 0 });

function App() {
    /**
     * ATLAS binding will rerender App
     * only if counter node is updated
     */
    useAtlas(counter.nodePath);
    return (
        <div>
            <span onClick={(e) => counter.update(x => x + 1)}>
                Increment
            </span>
            <span>
                {counter.value}
            </span>
            <span onClick={(e) => counter.update(x => x - 1)}>
                Decrement
            </span>
        </div>
    );
}

Class components binding

Methods

bindClassComponent(targetComponent: React.Component, ...nodes: string[])

Use this method in componentDidMount for binding your class components to ATLAS state management system.

Example

import React from "react";
import { PrimitiveNode } from "@farsoc/entity-atlas-nodes";
import { bindClassComponent } from "@farsoc/atlas-react";

const counter = new PrimitiveNode<number>({ initialValue: 0 });

class TestComponent extends React.Component {
    /**
     * ATLAS binding will rerender TestComponent
     * only if counter node is updated
     */
    componentDidMount() {
        bindClassComponent(this, counter.nodePath);
    }

    render() {
        return (
            <div>
                <span onClick={(e) => counter.update(x => x + 1)}>
                    Increment
                </span>
                <span>
                    {counter.value}
                </span>
                <span onClick={(e) => counter.update(x => x - 1)}>
                    Decrement
                </span>
            </div>
        );
    }
}