React Simplify

This library will support you to write less and do more.

Concept

The idea of this library was implement an easy way to use global states.

npm i react-simplify

Usage

You can use React Simplify easily with it's custom hooks.

useGlobalMaker

You can use this hook to create a new global state without link a component for update.

Information

It takes 1 or 3 arguments.

| Number | Name | Description| |--|--|--| | 1 | name* | The global-state's name | | 2 | [value] | The default/initial value | | 3 | [modifiers] | The modifiers/reducers |

or

| Number | Name | Description| |--|--|--| | 1 | data* | An object with the "name", "initialState" and "modifiers" or "reducers" properties |

Example

/* App.jsx / App.tsx */
useGlobalMaker('globalState', 0, {
		increase: (state) =>  state  +  1,
		decrease: (state) =>  state  -  1
	});

or

/* App.jsx / App.tsx */
useGlobalMaker({
	name: 'globalState',
	initialState: 0,
	reducers: {
		increase: (state) =>  state  +  1,
		decrease: (state) =>  state  -  1
	}
});

useGlobal

Create (at first call) or reuse a global state, the concept is very similar than useState.

Information

It has 1 parameter plus 2 optional parameters.

| Number | Name | Description| |--|--|--| | 1 | name* | The global-state's name | | 2 | [value] | The default/initial value | | 3 | [modifiers] | The modifiers/reducers | |--|--|--| |Return| Type | Description | Yes | Array | An array with the current value as first element and it's updater at second one |

Example

A good idea is use this hook in a parent to initialize it (if needed).

/* App.jsx / App.tsx */
const [globalValue, setGlobalValue] = useGlobal('globalName', 'globalValue');

If the global state was called previously, the second argument can be avoided.

/* Child.jsx / Child.tsx */
const [globalValue, setGlobalValue] = useGlobal('globalName');

useGlobalState

Since 1.6.9

Allows to get a global state without links the actual component to future changes.

Example

/* Child.jsx / Child.tsx */
const [globalValue, setGlobalValue] = useGlobalState('globalName');

setGlobalValue(1); /* Update others components but not this */

useModifier()

This hook able you to invoke the modifiers of a state.

Information

It receives 1 argument and, optionally, the arguments list for the modifier.

| Number | Name | Description| |--|--|--| | 1 | name* | The modifier's name | | ... | [values] | The values for the modifier |

Example

Supossing that we're using the example of useGlobalMaker, we could do the following to get a reference of the global state and it's modifiers:

/* Child.ts, remove the '<number>' for Child.js */
const [state, setState] =  useGlobal<number>('globalState');

After that, we have all pieces to use useModifier.

<button  onClick={() =>  setState(useModifier('increase'))}>{state}</button>

Easy, isn't is? So, what if we want to pass an argument? The following ways are allowed.

<button  onClick={() =>  setState(useModifier('increase', 1))}>{state}</button>

or

<button  onClick={() =>  setState(useModifier('increase'), 1)}>{state}</button>

We recomend to pass the arguments to the modifier directly from the state updater, in the example's case: setState.

useDarkMode()

Deprecated, use useIsDarkMode instead

This hook just return true if the user has the DarkMode enabled, false otherwise.

useIsDarkMode()

This hook just return true if the user has the DarkMode enabled, false otherwise.

useComplex()

Create a manipulable complex state.

Example

Supossing we want to store the name, phone and email of an user and update a component if whetever of these values are changed, the normal way could be declare the following.

const [name, setName] = useState('Alexander');
const [phone, setPhone] = useState('1010131351');
const [email, setEmail] = useState('[email protected]');

But, what happens if we want to update two or more states at once? This:

setPhone('2994646464');
setEmail('[email protected]');

It will produce a double rendering of the component, this is unnecesary and non optimal.

useContext is the attempt to reduce the amount of states in our components, it works as a normal useState, the main difference is the simplicity to modify complex objects.

const [useData, setUserData] = useComplex({
	name: 'Alexander',
	phone: '1010131351',
	email: '[email protected]'
});

If we want to update a member, we just need to do:

<h1  onClick={() =>  setUserData({name: 'Jorge'})}>{JSON.stringify(useData)}</h1>

Do you want to delete a member? ¡Of course! Just do:

<h1  onClick={() =>  setUserData({name: undefined})}>{JSON.stringify(useData)}</h1>

Do you want to update some elements? Go ahead:

<h1  onClick={() =>  setUserData({email: '[email protected]', phone: '11111111111'})}>{JSON.stringify(useData)}</h1>

Do you want to put some new members? You're welcome!:

<h1  onClick={() =>  setUserData({age: 25})}>{JSON.stringify(useData)}</h1>

useChecker()

Create a numeric identifier of an object or array, usefull for useEffect.

Information

It has 1 parameter.

| Number | Name | Description| |--|--|--| | 1 | object* | The object or array |

Example

const [users, setUsers] = useState([]);

useEffect(() => {
	// Do Something if users change
}, [useChecker(users)]);

This is an attempt to fix the following problem: ReactJS - Passing array to useEffect.