# success-modal-oc

> This is a simple React component that provides a modal for success messages. It includes basic animations and the ability to control its visibility.

Latest version **0.2.0** (published 2023-12-07) · 0 weekly downloads

## Install

```sh
npm install success-modal-oc
pnpm add success-modal-oc
yarn add success-modal-oc
bun add success-modal-oc
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-12-07 |
| First published | 2023-12-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fabkaiz |

## Links

- npm: https://www.npmjs.com/package/success-modal-oc
- npm.io page: https://npm.io/package/success-modal-oc

## Recent versions

- 0.2.0 (latest) — 2023-12-07
- 0.1.3 — 2023-12-07
- 0.1.2 — 2023-12-07
- 0.1.1 — 2023-12-07
- 0.1.0 — 2023-12-07

## README

# React SuccessModal Component

This is a simple React component that provides a modal for success messages. It includes basic animations and the
ability to control its visibility.

## Installation

Make sure you have [React](https://reactjs.org/), [React DOM](https://reactjs.org/docs/react-dom.html) installed in your project.
You can install this component using npm:

```bash
npm i success-modal-oc
```

## Usage

1. **Simply import the `SuccessModal` component and the `useMountTransition` custom hook into your React application:**

    ```jsx
    import SuccessModal from "success-modal-oc/dist/successModal.js";
    import useMountTransition from "success-modal-oc/dist/useMountTransition.js";
    ```

2. **Create a state variable to control the modal's visibility:**

    ```jsx
    const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
    ```

3. **Use the `useMountTransition` hook to handle the animation transition (optional):**

    ```jsx
    const hasTransitionedIn = useMountTransition(isSuccessModalOpen, 500);
    ```

   By default, the `useMountTransition` hook will use 500ms as the transition duration. You can pass a custom duration
   as the second argument and change the animation in the Scss file.  


4. **Implement the `SuccessModal` component in your application, exemple:**

    ```jsx
    const App = () => {
      return (
        <div>
            <button onClick={() => setIsSuccessModalOpen(true)}>
             Open Modal Button
           </button>
           {(hasTransitionedIn || isSuccessModalOpen) &&
               <SuccessModal
                   text='Modal open!'
                   isSuccessModalOpen={isSuccessModalOpen}
                   setIsSuccessModalOpen={setIsSuccessModalOpen}
                   hasTransitionedIn={hasTransitionedIn}
               />}
        </div>
      );
    };
    ```

## Props

- `text` (string): The text content to be displayed in the modal.
- `isSuccessModalOpen` (boolean): Controls the visibility of the modal.
- `setIsSuccessModalOpen` (function): Callback function to update the `isSuccessModalOpen` state.
- `hasTransitionedIn` (boolean): Indicates whether the modal has transitioned into the DOM.

## Example

![example](https://i.ibb.co/SvrBt83/example.png)

---
_Source: https://npm.io/package/success-modal-oc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._