# react-modal-selnir

> Simple Modal created for HRnet.

Latest version **0.6.0** (published 2022-11-08) · 0 weekly downloads

## Install

```sh
npm install react-modal-selnir
pnpm add react-modal-selnir
yarn add react-modal-selnir
bun add react-modal-selnir
```

## 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.6.0 |
| Published | 2022-11-08 |
| First published | 2022-11-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 4.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | selnir |

## Links

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

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Recent versions

- 0.6.0 (latest) — 2022-11-08
- 0.5.0 — 2022-11-08
- 0.4.0 — 2022-11-08
- 0.3.0 — 2022-11-08
- 0.2.0 — 2022-11-06
- 0.1.0 — 2022-11-06

## README

# react modal selnir

Simple Modal created for HRnet.

## Intallation

To install, you can either use [npm](https://npmjs.org/)

```
npm install react modal selnir
```

## How to use

By default, the modal will be hidden as represented by the **false** boolean set in `useState(false)`, to show it, you'll have to set `showModal` to **true** with `setShowModal(true)`.

### Example

```

import React, { useState } from 'react'
import Modal from './lib/react-modal-selnir'
import ReactDOM from 'react-dom'

const App = () => {
const [showModal, setShowModal] = useState(false)

const hideModal = () => showModal && setShowModal(false)

return (

<div>
<h1 style={{ textAlign: 'center', padding: '10px' }}>react-modal</h1>
<button
style={{
          width: '200px',
          display: 'block',
          margin: '0 auto',
          padding: '10px',
          background: 'none',
          border: 'none',
          backgroundColor: '#eee',
          fontSize: '20px',
          cursor: 'pointer'
        }}
onClick={() => setShowModal(true)} >
Show Modal
</button>
<Modal show={showModal} onClickCloseBtn={hideModal}>
<h1>I am a modal</h1>
</Modal>
</div>
)
}

```

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