simple-react-modal

Modal pluggin for project 14 : Pass a jQuery library to React

A simple react modal (conversion of the jquery modal)

Npm

1. Installation
2. Examples
3. Props

Installation

Install simple-react-modal with npm: npm i simple-fade-modal

How to use

Basic usage

import { Modal } from 'simple-fade-modal';

function MyModal() {
	const [modalState, setModalState] = useState(false);

	const toggle = () => {
		setModalState((prev) => !prev);
	};

	return (
		<>
			<button onClick={toggle}>Save</button>
			<Modal toggleModal={toggle} modalState={modalState}>
				I'm the content
			</Modal>
		</>
	);
}

Customized

const myContentStyle = {
	fontSize: '1.25rem',
	color: 'red',
	background: 'beige',
};

<Modal toggleModal={toggle} modalState={modalState} fadeDuration="200ms" contentStyle={myContentStyle} />;
//fadeDuration is 400ms by default

Proptypes

Modal.propTypes = {
	modalState: PropTypes.bool.isRequired,
	toggleModal: PropTypes.func.isRequired,
	fadeDuration: PropTypes.string,
	contentStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
	backgroundStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
};