react-simplify v1.7.0

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.

or

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.

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.

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('anonymous@anonimate.anon');

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

setPhone('2994646464');
setEmail('minsterious@email.com');

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: 'anonymous@anonimate.anon'
});

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: 'mycustomemail@gmail.net', 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.

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.