@traxjs/trax-react

Trax React Bindings

This package contains trax bindings for react and preact.

They allow to wrap components into trax processors and have them automatically re-rendered when one of their dependencies change (no need to re-render the react tree from the root);

This library mainly exports 4 functions

• component(...): to wrap a react/preact function component into a trax processor
• useTraxState(...): to create a simple reactive state object
• useStore(...): to instantiate a store and associate it to a component
• componentId(): to retrieve the processor id associated to a given component (this function must be called in the component render function)

component()

function component<T>(name: string, reactFunctionCpt: (props: T) => JSX.Element): (props: T) => JSX.Element {...}

Wrap a react function component into a trax processor. Note: the function component will be then considered as a pure component (Memo) and will only be re-rendered if

• one of its trax dependencies changed (these dependencies can be passed by any means, e.g. props, contexts or even global variables)
• a property reference changes (i.e. new reference for objects) - like for any react component

Parameters:

• name the compontent name - usually the same as the component function
• reactFunctionCpt the functional component

Example:

export const TodoList = component("TodoList", () => {
    const tds = useStore(createTodoStore);

    return <div data-id={componentId()} className='todoList'>
        ...
    </div>
});

useTraxState()

function useTraxState<T extends Object>(state: T): T

Create a trax state object to hold state values associated to a component. Note: this function should only be called once in a given component as multiple state values can be set in a given state object

Behind the scenes, useTraxState creates a simple store object and calls useStore - this is why it it is visible in the Store section in the dev tools.

useStore()

function useStore<T = any>(factory: () => T): T {...}

Helper function to create or retrieve a store instance attached to the caller component

• factory a factory function to create the store instance
• returns the store object

Example:

<div className="my-component" data-id={componentId()}> ... </div>

componentId()

function componentId(): string {...}

Return the id of the trax processor associated to a react component when called in in the component render function. Useful to insert the component id in the component HTML (e.g. through the data-id attribute) to ease troubleshooting

Example:

<div className="my-component" data-id={componentId()}> ... </div>

resetReactEnv()

function resetReactEnv() {...}

Reset the internal React data store to restart from a blank state (Test environment only)