nihar-parikh
Hey 👋 What's up?
#
My name is Nihar Parikh and I'm a intense contributor in JavaScript and its framework communities.
#
About me
#
useDynamicState Hook
A highly customizable React hook for managing multiple dynamic states with configurable handlers. This hook is designed to be reusable across various pages and components, ensuring efficient state management in performance-sensitive applications.
Installation
bash
Copy code
npm install react-use-dynamic-state-handler-hook
Usage
Basic Example
javascript
Copy code
import React from 'react';
import { useDynamicState } from 'your-package-name';
const MyComponent = () => {
const { states, updateState } = useDynamicState({
page1: {
initialState: 0,
handler: (state, increment) => state + increment,
},
page2: {
initialState: '',
handler: (state, newValue) => newValue,
},
});
return (
Page 1 Counter: {states.page1}
<button onClick={() => updateState('page1', 1)}>Increment</button>
Page 2 Input: {states.page2}
<input
value={states.page2}
onChange={(e) => updateState('page2', e.target.value)}
/>
);
};
export default MyComponent;
Advanced Usage
javascript
Copy code
import React from 'react';
import { useDynamicState } from 'your-package-name';
const MyComponent = () => {
const { states, updateState } = useDynamicState({
counter: {
initialState: 0,
handler: (state, value) => state + value,
},
inputText: {
initialState: '',
handler: (state, value) => value.trim(),
},
visibility: {
initialState: false,
handler: (state, toggle) => toggle !== undefined ? toggle : !state,
},
});
return (
Counter: {states.counter}
<button onClick={() => updateState('counter', 1)}>Increment</button>
Input: {states.inputText}
<input
value={states.inputText}
onChange={(e) => updateState('inputText', e.target.value)}
/>
Visibility: {states.visibility ? 'Visible' : 'Hidden'}
<button onClick={() => updateState('visibility')}>Toggle Visibility</button>
<button onClick={() => updateState('visibility', true)}>Show</button>
<button onClick={() => updateState('visibility', false)}>Hide</button>
);
};
export default MyComponent;
Parameters
configs: An object where each key represents a state key, and the value is a configuration object with the following properties:
initialState: The initial state value.
handler: A function that defines how the state should be updated. It receives the current state and additional arguments passed when calling updateState.
Return Value
states: An object containing the current state for each configured key.
updateState: A function that accepts a key and additional arguments to update the corresponding state using the configured handler.
Performance Optimization
This hook uses useMemo to memoize configurations and useCallback to ensure the updateState function is stable, minimizing unnecessary re-renders and optimizing performance.
Contributing
Feel free to contribute to this project by submitting issues or pull requests.
License
This project is licensed under the MIT License.
#
I code with
#
