open-index/open-npm huggingface dataset:
npm package: @mikael240820/modal-toast-tailwind
Description: React component for create modal (when `children` is provided) or toast (when `open` is `true`) IMPORTANT: Must use **Tailwind CSS** in your **project**
Latest version: 1.0.1

# modal-toast-tailwind

React component for create modal (when `children` is provided) or toast (when `open` is `true`)
IMPORTANT: Must use **Tailwind CSS** in your **project**

## Install

```bash
npm i @mikael240820/modal-toast-tailwind
```

### Tailwind CSS

In your main CSS file, add the following:

```css
@source "../node_modules/@mikael240820/modal-toast-tailwind/dist/**/*.{js,jsx,mjs}";
```

## Exemples

### Modal

```jsx
import { ModalToast as Modal } from "@mikael240820/modal-toast-tailwind";

export default function App() {
  return (
    <Modal title="My modal" triggerLabel="Open">
      <div>Modal content</div>
    </Modal>
  );
}
```

### Toast

```jsx
import { useState } from "react";
import { ModalToast as Toast } from "@mikael240820/modal-toast-tailwind";

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Show toast</button>

      <Toast
        title="Saved"
        description="Your changes have been success."
        open={open}
        onClose={() => setOpen(false)}
        duration={5000}
      />
    </>
  );
}
```