# dialog-modal-react-component

> Modal dialog component for React

Latest version **0.0.4** (published 2023-06-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install dialog-modal-react-component
pnpm add dialog-modal-react-component
yarn add dialog-modal-react-component
bun add dialog-modal-react-component
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-06-08 |
| First published | 2023-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | vb2095 |
| Keywords | modal, dialog, react, component |

## Links

- npm: https://www.npmjs.com/package/dialog-modal-react-component
- Repository: https://github.com/VB2095/dialog-modal-react-component
- Homepage: https://github.com/VB2095/dialog-modal-react-component#readme
- Issues: https://github.com/VB2095/dialog-modal-react-component/issues
- npm.io page: https://npm.io/package/dialog-modal-react-component

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2023-06-08
- 0.0.3 — 2023-06-07
- 0.0.2 — 2023-06-07
- 0.0.1 — 2023-06-07

## README

# dialog-modal-react-component

> A React component for a modal made with dialog html element

[![NPM](https://img.shields.io/npm/v/dialog-modal-react-component.svg)](https://www.npmjs.com/package/dialog-modal-react-component) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save dialog-modal-react-component
```

## Usage

Where you want to use the modal, import the component and use it like this:

```jsx
import { useEffect } from "react";

import Modal from "dialog-modal-react-component";
import "modal-dialog-react-component/dist/index.css";

class Example extends Component {
  render() {
    const [isModalOpen, setIsModalOpen] = useState(false); // state to control the modal
    return (
      <Modal isOpen={isModalOpen} setIsOpen={setIsModalOpen}>
        {Children}
      </Modal>
    );
  }
}
```

Then use `setIsModalOpen(true)` to open the modal. It can be used in a button onClick event for example, or when your form is submited.

## Example

```jsx
import React from "react";
import Modal from "dialog-modal-react-component";
import { useState } from "react";
const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleClick = () => {
    setIsModalOpen(true);
  };
  return (
    <>
      <p>App</p>
      <button onClick={handleClick}>Ouvrir la modal</button>
      <Modal isOpen={isModalOpen} setIsOpen={setIsModalOpen}>
        <p>Modal</p>
      </Modal>
    </>
  );
};

export default App;
```

## Customize

This component comes with a basic default style and is imported as `import "./modal.css";` but you can customize it by adding your own css.
Check the repository to get the default style and its classes and override it in your own css file.

Example:

```css
.modal {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  padding: 1rem;
  width: 100%;
  max-width: 40rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
```

## License

MIT © [VB2095](https://github.com/VB2095)

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