# react-modal-lois-rama

> A simple react modal to learn how to create and publish a React npm package

Latest version **1.0.3** (published 2022-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-modal-lois-rama
pnpm add react-modal-lois-rama
yarn add react-modal-lois-rama
bun add react-modal-lois-rama
```

## 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-01-13 |
| First published | 2022-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 4.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lois Ramanandraibe |
| Maintainers | lois-rama |

## Links

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

## Dependencies (6)

- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.2
- [win-node-env](https://npm.io/package/win-node-env.md) ^0.6.0
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^12.1.2
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.1
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Recent versions

- 1.0.3 (latest) — 2022-01-13
- 1.0.2 — 2022-01-13
- 1.0.1 — 2022-01-13
- 1.0.0 — 2022-01-07

## README

# react-modal-lois-rama

# Repository link
- [react-modal-lois-rama](https://www.npmjs.com/package/react-modal-lois-rama) v1.0.3

## Installation
To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):
```sh
$ npm i react-modal-lois-rama
$ yarn add react-modal-lois-rama
```
## General Usage
Thes is the general use of the modal:
```jsx
<Modal
    isOpen={isModalOpen} /* Boolean describing if the modal should be shown or not. */
    contentMessage={'Your message'} /* String that contains your modal message. */
    handleCloseModal={closeModal} /* Function that will be run when the modal is requested to be closed. */
    contentCloseBtn={'Close'} /* String that contains your close button message. */
/>
```

## Example
Here is a simple example of the modal being used with some custom styles.
```jsx
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import { Modal } from 'react-modal-lois-rama';

function App() {
	const [isModalOpen, setIsModalOpen] = useState(false);
  
	const openModal = () => {
		setIsModalOpen(true);
	};
	const closeModal = () => {
		setIsModalOpen(false);
	};
	const modalStyle = {
		background: {
			position: 'fixed',
			top: 0,
			left: 0,
			right: 0,
			bottom: 0,
			backgroundColor: 'grey',
		},
		modal: {
			position: 'absolute',
			top: '50%',
			left: '50%',
			transform: 'translate(-50%, -50%)',
			backgroundColor: 'lightgrey',
			padding: '15px 30px',
			borderRadius: '10px',
			display: 'flex',
			flexDirection: 'column',
			alignItems: 'center',
		},
		closeBtn: {
			marginTop: '18px',
		},
	};
	return (
    <>
    	<button type="button" className="btn" onClick={openModal}>
    		Open modal
    	</button>
    	<Modal
            isOpen={isModalOpen}
            contentMessage={'Your message'}
            handleCloseModal={closeModal}
            contentCloseBtn={'Close'}
            style={modalStyle}
		/>
    </>
	)
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

```

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