0.0.13 • Published 10 months ago

@samlab-corp/react-modals v0.0.13

Weekly downloads
-
License
-
Repository
-
Last release
10 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

10 months ago

0.0.11

10 months ago

0.0.12

10 months ago

0.0.13

10 months ago

0.0.9

10 months ago

0.0.8

10 months ago

0.0.7

10 months ago

0.0.6

10 months ago

0.0.5

10 months ago

0.0.4

10 months ago

0.0.3

10 months ago

0.0.2

10 months ago

0.0.1

10 months ago