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

react-modal-mrl

Installation

• npm i react-modal-mrl or
• yarn 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>