Members

# constant useModalState

A hook to access the modals' state. This hook takes n modal name as a first argument This hook takes an initial state as the second optional argument that allows you to set initial data for the specific modal's state based on the modal name argument

View Source index.ts, line 54

Example

import React from "react";
import { useModalState, ModalStoreProvider } from "react-use-modal-state";

const Counter = () => {
  const {
    isOpened,
    state: { counter },
    set,
    open,
    close
  } = useModalState("EXAMPLE_MODAL", { counter: 1, isOpened: true });

  return (
    <div>
      {isOpened && <div>{counter}</div>}
      <button onClick={() => set({ counter: counter + 1 })}>increment</button>
      <button onClick={() => (isOpened ? close() : open())}>
        {isOpened ? "Hide counter" : "Show counter"}
      </button>
    </div>
  );
};

const App = () => (
  <>
    <ModalStoreProvider>
      <Counter />
    </ModalStoreProvider>
  </>
);

export default App;