🔍 Holmes is a 0 config, fast and elementary state orchestrator for React.
Holmes has a very minimal API. It is as simple to use as React’s integrated hooks, but all state is globally accessible.
💡 Easy as React state hooks
🔄 State synchronization between components
🛰️ Distributed and not centralized state
🤯 No mutable objects
🚀 Fast
npm i @devx-os/react-holmes or yarn add @devx-os/react-holmes
https://devx-os.github.io/react-holmes/
Holmes has one objective: make state management as easy and fast as possible.
React components has a built-in state object, where you store property values that belongs to the component.
When the state object changes, the component re-renders.
This behaviour has certain limitations:
Component state can only be shared by pushing it up to the common ancestor, but this might include a huge tree that then needs to re-render. React-Holmes adopts a new vision when talking about state handling.
As other state managers use an external single source of truth to hydrate app client on state change, React-Holmes does not create an external store and does not need to wrap your app in a context.
There is no global state, actually.
The state is decentralized into components themselves.
The ONLY differences are the hook declared for state management and a key to identify state chunk.
While to declare a React state we need to declare it as:
const [state, setState] = React.useState('test');
with React-Holmes we need to declare it as:
const [state, setState] = useHolmesState('key', 'test');
Create a global state that can be observed by other components, this hook return the state and the setter function.
const [state, setState] = useHolmesState(key, initialState)
Example:
import React from 'react';
import { useHolmesState } from '@devx-os/react-holmes';
function MyComponent(props) {
// useHolmesState returns an observable state value
const [state, setState] = useHolmesState('myFirstGlobalState', 'initial value');
return (
<>
{state}
<button onClick={() => setState('new value')}>Change state</button>
</>
);
}
export default MyComponent;Get only the value of a global state by the state key.
const value = useHolmesValue(key)
Example:
import React from 'react';
import { useHolmesValue } from '@devx-os/react-holmes';
function MyComponent2(props) {
// access the value of the global state setted with useHolmesState
const value = useHolmesValue('myFirstGlobalState');
return (
<>
{value}
</>
);
}
export default MyComponent2;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent