React Modal Easy
Simple modal with good accessibility
The purpose of this component is to provide a simple interface. You won’t find predefined styles to cause you problems or unnecessary customizations.
Install
npm i react-modal-easy
Usage
// include styles
import 'react-modal-easy/dist/style.css';
const [visible, setVisible] = useState(false);
return (
<Modal isVisible={visible} onClose={() => setVisible(false)}>
<div style={{ backgroundColor: 'white', width: 500, padding: 20 }}>
<Modal.Title>React Modal Easy</Modal.Title>
...
</div>
</Modal>
);
Acessibility
By internally using the Radix Dialog, this component comes with accessibility configurations by default. However, for the best use of this feature, also utilize the Title, Description and Close components.
...
return (
<Modal
isVisible={visible}
onClose={onClose}
closeButton={
<Modal.Close onClick={onClose} aria-label='Close'>
X
</Modal.Close>
}
>
<Modal.Title>Lorem Ipsum is simply</Modal.Title>
<Modal.Description>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Modal.Description>
...
</Modal>
);
Props
PropertyTypeDefaultDescriptionisVisiblebooleanwhether to show dialogonClosefunctionhandler called onClose of modalanimation?‘scale’ , ‘translate’ , ‘none’scaleanimation typecloseButton?React.ReactNodeComponentclose component, use null to disable.className?stringmodal component classoverlayClassName?stringoverlay component class
Components
NameDescriptionModal.TitleAn accessible title to be announced when the dialog is opened.Modal.DescriptionAn optional accessible description to be announced when the dialog is opened.Modal.CloseThe button that closes the dialog.
