1.2.1 • Published 2 years ago
react-modal-mrl v1.2.1
react-modal-mrl
Simple modal component for React apps
Features
- Keyboard focus, accessibility friendly
- Customizable trigger
- Dynamic title and content (children)
- Customizable close icon (otherwise default icon)
getting started guide
Requirements specification
- React 17.0.2
Download
Installation
npm i react-modal-mrl
oryarn add react-modal-mrl
Usage
Import it in your React component
import { Modal } from "react-modal-mrl";
3 props required to work: show
, close
and title
And create a function to change the state of the modal, ex: trigger()
1.Exemple
const [modal, setModal] = useState(false);
const trigger = () => setModal(!modal);
<button className="click-me" onClick={() => trigger()}>
Click me
</button>
<Modal show={modal} close={trigger} title="Modal title"></Modal>
2.Exemple
1 optional prop is available to use a customizable close icon: closeIcon
And addition of children possible
const [modal, setModal] = useState(false);
const trigger = () => setModal(!modal);
<button className="click-me" onClick={() => trigger()}>
Click me
</button>
<Modal
show={modal}
close={trigger}
closeIcon={closeIcon}
title="Successfully registered">
// Modal containing an example of children
<ul>
<li>{user.firstName}</li>
<li>{user.lastName}</li>
<li>{user.department}</li>
<ul/>
<Link to="/user-profile">User profile</Link>
</Modal>
1.2.1
2 years ago
1.2.0
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.1.0
2 years ago