https://github.com/gndz07/modal-for-react

https://github.com/gndz07/modal-for-react

Last synced: 29 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/gndz07/modal-for-react
• Owner: gndz07
• Created: 2021-05-23T20:20:09.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-10-11T17:18:52.000Z (over 3 years ago)
• Last Synced: 2024-12-09T15:59:26.859Z (about 2 months ago)
• Language: JavaScript
• Size: 1.04 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [modal-for-react](https://www.npmjs.com/package/modal-for-react)

Simple customizable modal component for React apps.

**updated v1.0.0** pass the state setter directly, added function to close modal when user press `esc` or click outside of modal (or to persist the modal on outside click)

## Installation

To install using npm:

`npm install modal-for-react`

## API Documentation

This is a simple example of modal-of-react being used in a React app:

```

import React, { useState } from 'react';

import { Modal } from 'modal-for-react';

export default function ExampleModal() {

	const [isModalActive, setModalActive] = useState(false);

	const handleClickModal = () => isModalActive ? setModalActive(false) : setModalActive(true);

	return (

		


		Open modal

		

		

	)

};

```


You have to set a state for the modal in the parent component.

Props that could be passed to Modal component:

- **setState**(required): function that handle the state change in the parent component

- **isActive**(required): refer to the actual state of the parent component

- **modalContent**(required): content/message in the modal

- **backgroundStyle**(optional): object, custom style for background. Default background is full screen size with rgba(255,255,255,0.35) color.

- **contentStyle**(optional): object, custom style for the content inside the modal.

- **exitBtn**(optional): element to close the modal. Default element is "X". You can pass an icon, for example:

	`

	/>`

- **exitBtnStyle**(optional): object, style for the exit button element. By default this element is positioned on the right top corner of the modal.

- **refresh**(optional): boolean, if set to true the page will refresh after the the exit button clicked. Default value is false.

- **persist**(optional): boolean, if set to true the modal would not be closed when user clicked outside of the modal. Default value is false.