Modal

Component that displays a modal with the content in props

Properties
NameTypeDescription
setModalIsOpenObject

State function used to close the modal.

contentString

Content to display in the modal

Author
Source
Returns:

A JSX.Element that contains the modal.

Type: 
JSX.Element
Example
import { Modal } from 'modal-nextjs'
import { useState } from 'react'

const Example = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false)

  const handleclick = () => {
    setModalIsOpen(true)
  }

  return (
    <main>
      <h1>Hello world</h1>
      <button onClick={handleclick}>Click to open modal</button>
      {modalIsOpen && (
        <Modal
          setModalIsOpen={setModalIsOpen}
          content={
            <div>
              <p className="p-class-example">Modal is open !</p>
            </div>
          }
        />
      )}
    </main>
  )
}

export default Example