React Modal
Simple Modal working with React
Installation
Install react-modal with npm
npm i @fsmnk/react-modalUsage/Examples
import Modal from '@fsmnk/react-modal';
const App = () => {
return (
<div className="App">
<Modal>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Modal>
</div>
);
};
export default App;Props
| Name | Required | Default | Type | Example |
|---|---|---|---|---|
| title | no | undefined | string | Click |
| onOpen | no | undefined | function | Click |
| onClose | no | undefined | function | Click |
| onCreate | no | undefined | function | Click |
| onFocus | no | undefined | function | Click |
Props Examples
title
import Modal from '@fsmnk/react-modal';
const App = () => {
return (
<div className="App">
<Modal title="Lorem ipsum">...</Modal>
</div>
);
};
export default App;onOpen
onOpen trigger when menu is opened
<Modal onOpen={() => console.log('onOpen')}>...</Modal>onClose
onClose trigger when menu is closed
<Modal onClose={() => console.log('onClose')}>...</Modal>onCreate
onCreate trigger when component is create
<Modal onCreate={() => console.log('onCreate')}>...</Modal>onFocus
onFocus trigger when input is focused