React Modal

A simple customizable fullscreen modal component for React.JS

Table of Contents

• Installation
• Documentation
• Example
• Demo

Installation

To install, you can use npm, yarn or pnpm.

$ npm install julie-react-ts-modal
$ yarn add julie-react-ts-modal
$ pnpm add julie-react-ts-modal

(back to top)

Documentation

The basic documentation can be consulted here: Documentation

The documentation contains the description of all the props available for the modal component, and examples of usage.

(back to top)

Example

Here is a simple example of the modal being used in an app.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Modal, useModal } from 'julie-react-ts-modal'
import 'julie-react-ts-modal/dist/index.css' // if you are using Next, place this import in your _app.js or _app.ts file.

function App() {
  // if you only need one modal, use this hook
  const { isOpen, openModal, closeModal, handleEscClose } = useModal()
  
  // if you need more than one modal, you need to use different names for the hooks.
  // for example, if you have a confirmation modal and a modal with a form, you can do this:
  const {
    isOpen: isOpenForm,
    openModal: openModalForm,
    closeModal: closeModalForm,
    handleEscClose: handleEscCloseForm
  } = useModal()
  const {
    isOpen: isOpenConfirm,
    openModal: openModalConfirm,
    closeModal: closeModalConfirm,
    handleEscClose: handleEscCloseConfirm
  } = useModal()

  return (
    <div>
      <button onClick={() => openModal()}>
      {/*in the case of multiple modals, use your custom name for the function:
      <button onClick={() => openModalConfirm()}>
      <button onClick={() => openModalForm()}>*/}
      <Modal
        isOpen={isOpen} {/* use custom name for multiple modals*/}
        closeModal={closeModal} {/* use custom name for multiple modals*/}
        handleEscClose={handleEscClose} {/* use custom name for multiple modals*/}
        modalTitle={"My custom modal"}
        textContent={"Lorem ipsum dolor sit amet"}
      />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

(back to top)

Demo

Several demos of the various features are available here: Modal demos