0.0.13 • Published 9 months ago

@samlab-corp/react-modals v0.0.13

Weekly downloads
-
License
-
Repository
-
Last release
9 months ago

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()
0.0.10

9 months ago

0.0.11

9 months ago

0.0.12

9 months ago

0.0.13

9 months ago

0.0.9

9 months ago

0.0.8

9 months ago

0.0.7

9 months ago

0.0.6

9 months ago

0.0.5

9 months ago

0.0.4

9 months ago

0.0.3

9 months ago

0.0.2

9 months ago

0.0.1

9 months ago