open-index/open-npm huggingface dataset:
npm package: @samlab-corp/frontend-utils
Description: This library provides a modal components for our projects.
Latest version: 0.1.6

# 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`.

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

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

```js
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.

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

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

export default ComponentForUse;
```

- Then, add the modal hook logic like this:

```js
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()