Samlab React Modals

This library provides a modal components for our projects.

Usage

Step 1: Configure ModalProvider and ModalContainer

• In your application’s entry script (e.g., App.tsx), import ModalProvider and ModalContainer.

import { ModalProvider, ModalContainer } from "@samlab-corp/react-modals";

• Then, wrap your application's JSX as follows:

import { createRoot } from "react-dom/client";
import { ModalProvider, ModalContainer } from "@samlab-corp/react-modals";
import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(
  <RecoilRoot>
    <CookiesProvider>
      <ModalProvider>
        <ModalContainer />
        <App />
      </ModalProvider>
    </CookiesProvider>
  </RecoilRoot>
);

Step 2: Call modal as useModal hooks

• Import the useModal hook into the component where you want to use modals.

import { useModal } from "@samlab-corp/react-modals";

const ComponentForUse = () => {
  return <div />;
};

export default ComponentForUse;

• Then, add the modal hook logic like this:

import { useModal } from "@samlab-corp/react-modals";

const ComponentForUse = () => {
  const { openToast, openBottomUpModal } = useModal({
    viewBasis: "relativeEm",
    theme: {},
    fontFamily: "Pretendard",
  });

  return <div />;
};

export default ComponentForUse;

• Finally, you can trigger modals by calling the respective modal functions. All modal-triggering functions start with "open~".
• Currently available functions:
  • openModal()
  • openDialog()
  • openBottomUpModal()
  • openToast()