use-mapped-state

A React hook for mapping state on each state change

Usage no npm install needed!

<script type="module">
  import useMappedState from 'https://cdn.skypack.dev/use-mapped-state';
</script>

README


🗺️
use-mapped-state 


yarn add use-mapped-state

A React hook for mapping state on each state change


Usage

import useMappedState from 'use-mapped-state';

const Comp = () => {
  const [state, setState, [value1, yoValue]] = useMappedState(
    'initialValue',
    value => value + 1,
    value => 'Yo' + value
  );

  return (
    <div>
      <span>{state}</span>
      <span>{value1}</span>
      <span>{yoValue}</span>
      <button onClick={() => setState('Cool')} />
    </div>
  );
};

export default Comp;

Typings

The cool thing about this hook is that you get a typed return value of your map functions

const [
  num, // number
  setNum, // Dispatch..
  [
    value1, // number
    value2, // string
    value3, // object
  ],
] = useMappedState(1, value => value + 1, value => 'Yo' + value, value => ({ value }));