# react-portal-modal-minimalist

> a simple modal build for React.js

Latest version **1.0.3** (published 2022-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-portal-modal-minimalist
pnpm add react-portal-modal-minimalist
yarn add react-portal-modal-minimalist
bun add react-portal-modal-minimalist
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-05-03 |
| First published | 2022-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | AlexTremoureux |
| Maintainers | alextrem |

## Links

- npm: https://www.npmjs.com/package/react-portal-modal-minimalist
- npm.io page: https://npm.io/package/react-portal-modal-minimalist

## Recent versions

- 1.0.3 (latest) — 2022-05-03
- 1.0.2 — 2022-04-29
- 1.0.1 — 2022-04-28
- 1.0.0 — 2022-04-28

## README

# react-portal-modal-minimalist

## About

A simple component build for React projects.

## Installation

You can install this component with npm or yarn:

    npm i react-portal-modal-minimalist

or

    yarn add react-portal-modal-minimalist

## How to use component

Start by Import the component in your file:

    import { Modal } from "react-portal-modal-minimalist";

Define the theme of the component with:
```js
    const customTheme = {
    backgroundColorWrapper: "rgba(138, 138, 138, 0.6)",
    backgroundColormodal: "#282c34",
    colorText: "white",
    modalWidth: "60%",
    modalHeight: "60%",
};
```

Initialize the state of Modal opening:

```js
const [isOpen, setIsOpen] = useState(false);
```

Call your component:

```js
<Modal handleClose={() => setIsOpen(false)} isOpen={isOpen} theme={customTheme}>
  Employee is created!
</Modal>
```

Example:

```js
const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const customTheme = {
    backgroundColorWrapper: "rgba(138, 138, 138, 0.6)",
    backgroundColormodal: "#282c34",
    colorText: "white",
    modalWidth: "40%",
    modalHeight: "25%",
    fontSize: "1.8rem",
    transitionCloseBtn: " transform 1000ms",
  };
  return (
    <div className="App">
      <button onClick={() => setIsOpen(true)}>Click to Open Modal</button>
      <Modal
        handleClose={() => setIsOpen(false)}
        isOpen={isOpen}
        theme={customTheme}
      >
        Write your text here!
      </Modal>
    </div>
  );
};
```

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