DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A Simple React modal with good accessibility

React Modal Easy

A Simple React modal with good accessibility

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
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

A Simple React modal with good accessibility

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>
);
Enter fullscreen mode Exit fullscreen mode

Props

Property Type Default Description
isVisible boolean whether to show dialog
onClose function handler called onClose of modal
animation? ‘scale’ , ‘translate’ , ‘none’ scale animation type
closeButton? React.ReactNode Component close component, use null to disable.
className? string modal component class
overlayClassName? string overlay component class

Components

Name Description
Modal.Title An accessible title to be announced when the dialog is opened.
Modal.Description An optional accessible description to be announced when the dialog is opened.
Modal.Close The button that closes the dialog.

GitHub

View Github

Top comments (0)