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)