# dw-react-modal

> ![shields](https://img.shields.io/badge/version-v1.1.0-blue) ![shields](https://img.shields.io/badge/make_with-React_in_create--react--app-red) ![shields](https://img.shields.io/badge/author-David_Weiland-green)

Latest version **1.2.0** (published 2021-11-26) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2021-11-26 |
| First published | 2021-11-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 7.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | David Weiland |
| Maintainers | david_weiland |

## Links

- npm: https://www.npmjs.com/package/dw-react-modal
- Repository: https://github.com/DavidWeiland/DW-Modal
- Issues: https://github.com/DavidWeiland/DW-Modal.git/issues
- npm.io page: https://npm.io/package/dw-react-modal

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Recent versions

- 1.2.0 (latest) — 2021-11-26
- 1.1.0 — 2021-11-26
- 0.2.0 — 2021-11-26
- 0.1.0 — 2021-11-26

## README

![shields](https://img.shields.io/badge/version-v1.1.0-blue)
![shields](https://img.shields.io/badge/make_with-React_in_create--react--app-red)
![shields](https://img.shields.io/badge/author-David_Weiland-green)

# DW-REACT-MODAL
## Composant React personnel

This component must work in react app and it was bootstrapped with  [Create React App](https://github.com/facebook/create-react-app).

## Install module
In your own react project :

install with npm :
```
npm install dw-react-modal
```
or, with yarn :
```
yarn add dw-react-modal
```

## How to use dw-react-modal component :

1. Before the render, you must add the following elements :
- a state hook with useState
- a close function

2. In the render, add where you want the module

For example:
```
export default function YourApp() {
  const [ modal, setModal ] = useState(false)
  const closeModal = () => { setModal(!modal) }

  return (
    <Modal
      state={modal}
      config={{}}
      close={closeModal}
    >
      {/* here, html elements in the modal */}
    </Modal>
  )
}
```

## Props
#### required props
`state={modal}` : this is the open or close status of the modal (refers to state hook)

`close={closeModal}` (refers to close function)

#### Optional extras
`config={{}}` : to configure style :

- alignItems
- backgroundColor
- borderRadius
- color
- fontSize
- fontWeight
- height
- justifyContent
- width

example :
```
config = {
  {
    backgroundColor : "#FFF",
    color:"#333333"
  }
}
```


## Supports
Homepage of the module : [https://github.com/DavidWeiland/DW-Modal](https://github.com/DavidWeiland/DW-Modal)

Please report bugs in : [https://github.com/DavidWeiland/DW-Modal.git/issues](https://github.com/DavidWeiland/DW-Modal.git/issues)

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