Andyrama Modal

A fully customizable Modal component for React apps

Using React Portal, the Modal is mounted on its own node as a distinct child of App body

Features

☑️ useModal

Custom hook to mount / unmount Modal container

☑️ VARIOUS ITEMS

🔘 close button (img)
🔘 Modal container illustration (img)
🔘 title
🔘 message line 1
🔘 message line 2
🔘 button 1
🔘 button 2

☑️ THAT YOU CAN

🔘 EDIT ---- (string type)
🔘 HIDE ---- (exept required)
🔘 DISABLE - (button type)
🔘 STYLE --- (css files)
    ✔ separated color variables
    ✔ clear and logical items attributes

Getting started guide

Source andyrama-modal

Install

With npm run the following command

npm i andyrama-modal

With yarn run the following command

yarn add andyrama-modal

Props

| Name | Type | Description | Status | | ----------------- | -------- | ---------------------------------- | ------------ | | modal | Boolean | mount Modal or null | required | | close | Function | on click : close modal | required | | x | String | close image source | required | | icon | String | modal container image source | optional | | hideIcon | Boolean | mount item or null | optional | | title | String | any | optional | | hideTitle | Boolean | mount item or null | optional | | msgL1 | String | any | required | | msgL2 | String | any | optional | | hideMsgL2 | Boolean | mount item or null | optional | | btn1 | String | any | optional | | disableBtn1 | Boolean | add or remove 'disabled' attribute | optional | | hideBtn1 | Boolean | mount item or null | optional | | btn2 | String | any | optional | | disableBtn2 | Boolean | add or remove 'disabled' attribute | optional | | hideBtn2 | Boolean | mount item or null | optional | | redirect | Function | on click : redirect to chosen url | optional | | hideHeader | Boolean | mount item or null | optional | | hideFooter | Boolean | mount item or null | optional | | modalClass | string | add a custom class modal | optional | | CloseClass | string | add a custom class bt-close | optional | | ShowSpinner | Boolean | mount item or null | optional | | SpinnerHtml | string | add a custom spinner html | optional | | animationClass| integer | add animation modal appear | optional |

Accessibility

- only semantic html tags,
- required ARIA attributes,
- custom focus handlers,

to improve the user experience while keyboard navigation.

ARIA attributes

 <section
    tabIndex={-1}
    role="dialog"
    aria-modal="true"
    id="modal-component"
    aria-label="pop up message"
    aria-labelledby="dialogTitle"
    aria-describedby="dialogDescription"
    className="modal-container"
  >
  {/* code */}
  </section>

Focus handling

🔘 Auto focus on modal when open
🔘 Focus on each element by "Tab" (or "shift" + "Tab") key press
🔘 Escape key press to close modal

Use

Import the plugin & its hook in your React component

import { Modal, useModal } from 'andyrama-modal';

Import UseNavigate hook if you need to implement redirect function

import { useNavigate } from 'react-router-dom'; // !!! IN ROUTING CONTEXT

Use the default assets to beautify your modal (like exemple)

      <Modal
        x={close}
        icon={check}
        // or icon={validate}
      />

& CREATE YOURS !

Here is a fully exemple with helpfull comments

import { useEffect } from 'react'

function Exemple() {
  const { isOpen, toggle, escToClose } = useModal()

  // detects when escape key pressed to close the modal
  // and stops event propagation when occured
  useEffect(() => {
    window.addEventListener('keydown', escToClose)
    return () => window.removeEventListener('keydown', escToClose)
  })

  // // !!! NEEDS APP ROUTING
  // const redirectTo = useNavigate();
  // function goTo() {
  //   redirectTo('url'); // replace 'url' by yours
  // }

  return (
    <>
      <button className="open-modal-btn" onClick={toggle}>
        Open Modal
      </button>
      <Modal
        ///////////////////////// MINIMAL (required) //////////////////////////////////////

        modal={isOpen}                                  // useModal hook
        close={toggle}                                  // useModal hook
        x={close}                                       // replace with the name of your import
        escToClose={true}                               // useModal hook
        
        //////////////////////// ADDITIONAL (optional) //////////////////////////////////////
        
        icon={check}                                     // replace with the name of your import
        title="Confirmation"                             // replace with any string
        msgL1="Modal plugin"                             // replace with any string
        msgL2="successfully installed"                   // replace with any string
        btn1="Back"                                      // replace with any string
        btn2="Redirect"                                  // replace with any string
        // modalClass="custom-modal-class"               // decomment to add custom modal class
        // closeClass="custom-close-class"               // decomment to add custom close class
        // showSpinner={true}                            // decomment to show spinner
        // spinnerHtml='<div className="Myclass"></div>' // decomment to add custom spinner
        // animationClass={'animationClass'}             // decomment to show animation modal
        // redirect={goTo}                               // !!! NEEDS APP ROUTING

        ///////////////////////// DISABLE (optional) /////////////////////////////////////////

        // disableBtn1={true}                            // decomment to disable btn1
        disableBtn2={true}                               // comment to enable btn2

        ////////////////////////// HIDE (optional) ///////////////////////////////////////////

        // hideBtnClose={true}                           // decomment to hide btnClose
        // hideIcon={true}                               // decomment to hide icon
        // hideTitle={true}                              // decomment to hide title
        // hideMsgL2={true}                              // decomment to hide msgL2
        // hideBtn1={true}                               // decomment to hide btn1
        // hideBtn2={true}                               // decomment to hide btn2
        // hideHeader={true}                             // decomment to hide header
        // hideFooter={true}                             // decomment to hide footer
      />
    </>
  )
}

export default Exemple

Here you can custom class css for Modal[custom-modal-class]

Source Modal

Source exemple