yet-another-react-modal-component v1.0.2

yet-another-react-modal-component

Yet Another React Modal Component

Table of content

• Installation
• Example
• Functions
  • openModal
  • closeModal
  • toggleModal
• Options
  • noCloseButton
  • noBackdropClose
  • defaultOpen
  • Other props
• Accessibility

Installation

With npm :

npm install yet-another-react-modal-component

With yarn :

yarn add yet-another-react-modal-component

Example

import React from 'react'
import Modal, { openModal }

const App = () => {
  return (
    <>
      <button onClick={() => openModal("#example") } >
        Open Modal
      </button>

      <Modal id="example">
        <h1>Title</h1>
        Example text
      </Modal>
    </>
  )
}

Functions

There is 3 function : openModal, closeModal and toggleModal :

openModal

Use openModal to strictly open a modal :

import React from 'react'
import Modal, { openModal }

const App = () => {
  return (
    <>
      <button onClick={() => openModal("#example") } >
        Open Modal
      </button>

      <Modal id="example">
        <h1>Title</h1>
        Example text
      </Modal>
    </>
  )
}

closeModal

Use closeModal to strictly close a modal :

import React from 'react'
import Modal, { openModal, closeModal }

const App = () => {
  return (
    <>
      <button onClick={() => openModal("#example") } >
        Open Modal
      </button>

      <Modal id="example">
        <h1>Title</h1>
        Example text
        <button onClick={() => closeModal("#example") } >
          Close Modal
        </button>
      </Modal>
    </>
  )
}

toggleModal

Use toggleModal to toggle a modal :

import React from 'react'
import Modal, { toggleModal }

const App = () => {
  return (
    <>
      <button onClick={() => toggleModal("#example") } >
        toggleModal the Modal
      </button>

      <Modal id="example">
        <h1>Title</h1>
        Example text
        <button onClick={() => toggleModal("#example") } >
          toggleModal the Modal
        </button>
      </Modal>
    </>
  )
}

Options

noCloseButton

The modal come with a close button that can be disabled with noCloseButton :

<Modal noCloseButton>
  <h1>Title</h1>
  Example text
</Modal>

noBackdropClose

The modal backdrop can be closed on click, it can be disabled with noBackdropClose :

<Modal noBackdropClose>
  <h1>Title</h1>
  Example text
</Modal>

defaultOpen

The modal can be opened by default with defaultOpen :

<Modal defaultOpen>
  <h1>Title</h1>
  Example text
</Modal>

Other props

You can also add any other props :

<Modal id="example" className="example">
  <h1>Title</h1>
  Example text
</Modal>

Accessibility

The modal use the <dialog> element, aria-modal is handled automatically. If you wish to know more about dialog accessibility, you can read W3C aria practices for modal.