React-use-mapped-state NPM

react-use-mapped-state

Install

npm i react-use-mapped-state

Usage -- Basic

import React from 'react';

import { useMappedState } from 'react-use-mapped-state';

const Example = () => {
  const [{ title }, setState] = useMappedState([
    ['title', 'Our first ok title with object'],
  ]);
  const onChangeTitle = () => {
    setState('title', 'Our fantastic new title....with object');
  };
  return (
    <>
      <div>{title}</div>
      <button onClick={onChangeTitle}>Change Title</button>
    </>
  );
};

export default Example;

Usage -- Basic with previousValues using function

import React from 'react';

import { useMappedState } from 'react-use-mapped-state';

const Example = () => {
  const [{ counter }, setState] = useMappedState([['counter', 1]]);
  const onIncremenet = () => {
    setState('counter', prevVal => prevVal + 1);
  };
  return (
    <>
      <div>{counter}</div>
      <button onClick={onIncremenet}>Click to Increment</button>
    </>
  );
};

export default Example;

Usage -- Basic - with Batching

import React from 'react';

import { useMappedState } from 'react-use-mapped-state';

const Example = () => {
  const [{ title }, setState] = useMappedState([
    ['title', 'Our first ok title with object'],
    ['hasTitleChanged', false],
  ]);
  const onChangeTitle = () => {
    setState(
      ['title', hasTitleChanged],
      ['Our fantastic new title....with object', true]
    );
  };
  return (
    <>
      <div>{title}</div>
      <div>Has title Ever been changed? {hasTitleChanged}</div>
      <button onClick={onChangeTitle}>Change Title</button>
    </>
  );
};

export default Example;

Usage -- Basic with previousValues using function with batching

import React from 'react';

import { useMappedState } from 'react-use-mapped-state';

const Example = () => {
  const [{ counter }, setState] = useMappedState([
    ['counter', 1],
    ['hasCounterBeenClicked', false],
  ]);
  const onIncremenet = () => {
    setState(
      ['counter', 'hasCounterBeenClicked'],
      [prevVal => prevVal + 1, true]
    );
  };
  return (
    <>
      <div>{counter}</div>
      <div>Has Counter Been Clicked? {hasCounterBeenClicked}</div>
      <button onClick={onIncremenet}>Click to Increment</button>
    </>
  );
};

export default Example;