React-hooks-usemappedstate NPM

react-hooks-usemappedstate

Install

npm i react-hooks-usemappedstate

Usage -- Primitive Values

import React from "react";

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

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

export default Example;

Can also be used with the array format for creating Maps

import React from "react";

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

const ExampleTwo = () => {
  const [{ title }, valueSetter] = useMappedState([
    ["title", "Our first ok title with array"]
  ]);
  const onoChangeTitle = () => {
    valueSetter("title", "Our fantastic new title....with array");
  };
  return (
    <>
      <div>{title}</div>
      <button onClick={onoChangeTitle}>Change Title</button>
    </>
  );
};

export default ExampleTwo;

Usage -- Abstract Values

import React from "react";

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

const ExampleThree = () => {
  const someAbstractValue = { prop1: "Hi", prop2: "something else" };
  const [getter, setter] = useMappedState(
    [[someAbstractValue, "Our first ok title with complex array"]],
    { complexKeysEnabled: true }
  );

  const title = getter(someAbstractValue);

  const onoChangeTitle = () => {
    setter(someAbstractValue, "Our fantastic new title....with complex array");
  };

  return (
    <>
      <div>{title}</div>
      <button onClick={onoChangeTitle}>Change Title</button>
    </>
  );
};

export default ExampleThree;

Can also be used with the array format for creating Maps

import React from "react";

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

const ExampleFour = () => {
  const someAbstractValue = () => ({ prop1: "Hi", prop2: "something else" });
  const [getter, setter] = useMappedState(
    [[someAbstractValue, "Our first ok title with Function"]],
    { complexKeysEnabled: true }
  );

  const title = getter(someAbstractValue);

  const onoChangeTitle = () => {
    setter(someAbstractValue, "Our fantastic new title....with Function");
  };

  return (
    <>
      <div>{title}</div>
      <button onClick={onoChangeTitle}>Change Title</button>
    </>
  );
};

export default ExampleFour;