react-use-mapped-state

Install

1npm i react-use-mapped-state

Usage -- Basic

1import React from 'react';
2
3import { useMappedState } from 'react-use-mapped-state';
4
5const Example = () => {
6  const [{ title }, setState] = useMappedState([
7    ['title', 'Our first ok title with object'],
8  ]);
9  const onChangeTitle = () => {
10    setState('title', 'Our fantastic new title....with object');
11  };
12  return (
13    <>
14      <div>{title}</div>
15      <button onClick={onChangeTitle}>Change Title</button>
16    </>
17  );
18};
19
20export default Example;

Usage -- Basic with previousValues using function

1import React from 'react';
2
3import { useMappedState } from 'react-use-mapped-state';
4
5const Example = () => {
6  const [{ counter }, setState] = useMappedState([['counter', 1]]);
7  const onIncremenet = () => {
8    setState('counter', prevVal => prevVal + 1);
9  };
10  return (
11    <>
12      <div>{counter}</div>
13      <button onClick={onIncremenet}>Click to Increment</button>
14    </>
15  );
16};
17
18export default Example;

Usage -- Basic - with Batching

1import React from 'react';
2
3import { useMappedState } from 'react-use-mapped-state';
4
5const Example = () => {
6  const [{ title }, setState] = useMappedState([
7    ['title', 'Our first ok title with object'],
8    ['hasTitleChanged', false],
9  ]);
10  const onChangeTitle = () => {
11    setState(
12      ['title', hasTitleChanged],
13      ['Our fantastic new title....with object', true]
14    );
15  };
16  return (
17    <>
18      <div>{title}</div>
19      <div>Has title Ever been changed? {hasTitleChanged}</div>
20      <button onClick={onChangeTitle}>Change Title</button>
21    </>
22  );
23};
24
25export default Example;

Usage -- Basic with previousValues using function with batching

1import React from 'react';
2
3import { useMappedState } from 'react-use-mapped-state';
4
5const Example = () => {
6  const [{ counter }, setState] = useMappedState([
7    ['counter', 1],
8    ['hasCounterBeenClicked', false],
9  ]);
10  const onIncremenet = () => {
11    setState(
12      ['counter', 'hasCounterBeenClicked'],
13      [prevVal => prevVal + 1, true]
14    );
15  };
16  return (
17    <>
18      <div>{counter}</div>
19      <div>Has Counter Been Clicked? {hasCounterBeenClicked}</div>
20      <button onClick={onIncremenet}>Click to Increment</button>
21    </>
22  );
23};
24
25export default Example;

License

MIT © 901david

---

This hook is created using create-react-hook.