It's a customisable modal with different props.

This modal is an element displayed on top of the main content in the purpose of displaying additional information in reaction to previous action (button click, form submission validation,...)

You can customise content and style, including the title, description text, button text, button color, and duration of fadeIn/fadeOut animation. It also deals with links and could display some information from ID anchors, external links or data from an API. You can refer to the documention below to understand how to use the props.

This module was bootstrapped with Create React App.

remarkable dependencies

use of :

npm install react-modal-tuv39

import { Modal } from 'react-modal-tuv39'

The react-modal-tuv39 component was originally created to replace a jquery modal in a global react project.

A modal is ran when an action is done

The modal need a local state to be fired, this local state is boolean which open/close modal.

import React from 'react';
import { Modal } from 'react-modal-tuv39';

const test = () =>{
  const [appear, setAppear] = useState(false);

  return (
    <div>
      <button onclick={()=>{setAppear(true)}}>
      <Modal
        showModal={appear}
        onClose={()=>setAppear(false)}
        title="Here is a title"
        backDropClickAndClose
        closeAllModalsBefore
        fadeIn
        animationDuration="1"
        fadeOut
        closureButton="I'm closing"
        customButtonColor="orange"
      >{"Here is some description text that your modal displays"}</Modal>
    </div>
  )
}

The datahref props expect a "event.target" that provide an object as bellow: eg : some text

const try =()=>{
    const [appear, setAppear] = useState(false)
    const [dataToGive, setDataToGive] = useState(null);
    return (
      <>
  <a
          href="https://www.npmjs.com/package/react-modal-tuv39"
          onClick={(event) => {
            setDataToGive(event.target);
            setAppear(true);
          }}
        />
        <Modal
        showModal={montre4}
        onClose={()=>setAppear(false)}
        dataHref={dataToGive}
        >
        Here is the link clicked:
        </Modal>
        </>
        )}

There is a breakpoint that change the modal display, in higher 600px screen width, the modal will fit to his content to adjust width. In lower case, the modal width is settle as '90vw'

Here are modal component props. Some of those props are required (*). Some of those props work together for an action. (eg: fadeIn + animationDuration)

It is possible to customise some more of the style with the reference bellow: