react-defuse
v1.2.11
Published
A library for declarative state management in React, inspired by X3D, featuring `withDefUse` and `Route` components for intuitive state routing and reusability.
Downloads
12
Maintainers
Readme
react-defuse
react-defuse
is designed for declarative state management in React applications. Drawing inspiration from X3D, this library introduces a unique blend of concepts with its withDefUse
higher-order component (HOC) and a Route
component. State management is inspired by libraries like recoil and is implemented with a sub-pub-pattern for efficient and precise update of components using the shared state without rerendering the complete component tree.
Features
- Inspired by X3D: Incorporating concepts from X3D to bring a familiar yet innovative approach to state management in React.
- Declarative Approach: Simplify your state management with a more readable and declarative approach.
- Higher-Order Component: Utilize
withDefUse
,withUniqueDef
andwithConsistentComponentType
to enhance your components with advanced state management capabilities and runtime error checking. - Intuitive State Routing: Leverage the
Route
component to manage granular state setting and property mapping. - Reusable Components: Achieve higher reusability of your components, leading to cleaner code and a more maintainable codebase.
Installation
To integrate react-defuse
into your project, run the following command:
npm install react-defuse
Usage Example with withDefUse
This example demonstrates how to use withDefUse
for sharing state between components in a React application.
Scenario
We have two component instances:
- DEF: <ComponentWithDefUse DEF="sharedTopicID" {...properties} /> Defines a shared state that inclused the properites defined by the interface of the component definition wrapped my the
withDefUse
hoc. - USE: Consumes the shared state. properties defined on the consuming component will be ignored
import React from 'react'
import { withDefUse } from 'react-defuse'
const ComponentWithDefUse = withDefUse(({ message }) => <div>Message: {message}</div>)
// DEFining the state
const messageText = "hello world!"
<ComponentWithDefUse DEF="sharedMessage" message={messageText} />
...
somewhere in the component tree
...
// USEing the state. The component will render <div>DEF Message: hello world!</div>
<ComponentWithDefUse USE="sharedMessage" />