# hrnet-react-modal-component

> basic react modal component

Latest version **1.0.9** (published 2023-04-23) · 0 weekly downloads

## Install

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

## 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.9 |
| Published | 2023-04-23 |
| First published | 2023-04-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | GrigoriSchneider |
| Maintainers | grigorischneider |
| Keywords | react, components, ui, modal |

## Links

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

## Dependencies (2)

- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.18.6

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2023-04-23
- 1.0.8 — 2023-04-23
- 1.0.7 — 2023-04-23
- 1.0.6 — 2023-04-23
- 1.0.5 — 2023-04-23
- 1.0.4 — 2023-04-23
- 1.0.3 — 2023-04-23
- 1.0.2 — 2023-04-23
- 1.0.1 — 2023-04-23
- 1.0.0 — 2023-04-21

## README

# Plugin to add basic Modal component from HRnet project

A React-Component for the HRnet project from Openclassroom.
It appears when a user is successfully created.

## Features

- Dynamic diplay control
- Lock the webpage controls as long as the modal is shown
- Provides 2 actions: click outside & confirm

## Get started

### Download

[hrnet-modal](https://www.npmjs.com/package/hrnet-modal)

### Requirements

- React 18

### Installation

- using npm
  `npm install hrnet-modal`

- using yarn
  `yarn add hrnet-modal`

### Usage

Import the plugin from node_modules in your React component.
The Modal requires 2 props to work:

- `isOpen`(boolean): variable controlling the display of the modal
- `onConfirm`(function): action triggered when clicking on the 'check' icon (& triggered on clicking outside the modal if no action is provided for this action)
  The Modal has 2 optionnal props:
- `message`(string): personnalized message written on the modal
- `onClickOutside`(function): action triggered when clicking outside the modal

_ExampleAppComponent.js_

```javascript
import Modal from "./lib/Modal";
import { useState } from "react";

function ExampleAppComponent() {
  const [modalSwitch, setModalSwitch] = useState(false);

  const toggleModal = () => setModalSwitch(!modalSwitch);

  return (
    <div className="App">
      <div onClick={toggleModal}>Click here to open modal</div>

      <Modal modalStatus={modalSwitch} onConfirm={toggleModal} />
    </div>
  );
}

export default ExampleAppComponent;
```

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