Documentation

Global

Methods

Provides the structure of a modal with:

  • A header with the title of the latter,
  • An empty body which can be filled with the children prop,
  • A footer with a confirmation button and a button cancellation belonging to the form whose id corresponds to the value of the buttonsForm prop.
Parameters:
Name Type Description
ModalProps ModalProps

View Source components/Modal.jsx, line 234

The modal component

JSX.Element
Example
const SignupModal = ({
 isOpen,
 handleClickOutside,
 handleClickOnCloseButton,
}) => {
 return (
   <Modal
     isOpen={isOpen}
     handleClickOutside={handleClickOutside}
     handleClickOnCloseButton={
       handleClickOnCloseButton
     }
     buttonsForm="signup-form"
     title="Inscription"
     subHeaderContent={
       <p className="signup-modal__header__subtitle">
           Création d'un compte utilisateur
       </p>
     }
     hideCancelButton
     confirmButtonOptions={{
       name: "signup-form-submit-button",
       content: "S'inscrire",
     }}
     styleModifier={{
       backdrop: "signup-modal",
       header: "signup-modal__header",
       confirmButton: "signup-modal__footer__confirm-button",
     }}
   >
     <form
       id="signup-form"
       action="#"
       className="signup-form"
     >
       <fieldset>
         <legend className="signup-form__fieldset__legend">
           Identity
         </legend>

         <div className="signup-form__fieldset__field">
           <label htmlFor="first-name">
             First name:
           </label>

           <input
             type="text"
             name="first-name"
             id="first-name"
           />
         </div>

         <div className="signup-form__fieldset__field">
           <label htmlFor="last-name">
             Last name:
           </label>

           <input
             type="text"
             name="last-name"
             id="last-name"
           />
         </div>
       </fieldset>

       <fieldset>
         <legend className="signup-form__fieldset__legend">
           Credentials
         </legend>

         <div className="signup-form__fieldset__field">
           <label htmlFor="email">Email:</label>

           <input
             type="text"
             name="email"
             id="email"
           />
         </div>

         <div className="signup-form__fieldset__field">
           <label htmlFor="password">
             Password:
           </label>

           <input
             type="text"
             name="password"
             id="password"
           />
         </div>
       </fieldset>
     </form>
   </Modal>
 )
}

Type Definitions

Object

# ConfirmButtonOptions

Used to define the parameters of the form associated with the confirmation button, modify the value of its name attribute and replace its text with another text, an element or a component.

Properties:
Name Type Description
name String

See the MDN reference of the <button> element name attribute
formNoValidate Boolean

See the MDN reference of the <button> element formNoValidate attribute
formAction String

See the MDN reference of the <button> element formAction attribute
formEncType String

See the MDN reference of the <button> element formEncType attribute
formMethod String

See the MDN reference of the <button> element formMethod attribute
formTarget String

See the MDN reference of the <button> element formTarget attribute
content String | React.ReactNode

Allows you to replace the default button text with an element (e.g. an SVG icon), a component or a string.

View Source components/Modal.jsx, line 5

Object

# ModalProps

Properties:
Name Type Attributes Default Description
isOpen Boolean
children React.ReactNode

Represents the main content of the modal that will be displayed between the header and the footer.
handleClickOutside VoidFunction

Manages the closing of the modal when the user clicks on the latter's backdrop.

See the type definition of this callback in the useModal module.
handleClickOnCloseButton VoidFunction
handleConfirm function <optional>
 () => {}
handleCancel function <optional>
 () => {}
buttonsForm String <optional>
 ""

See the MDN reference of the <button> element form attribute
title String <optional>

The title displayed in the modal's header. If this property is not provided then no header will be rendered.
animationEnabled Boolean <optional>
 false
hideTitle Boolean <optional>
 true
hideCancelButton Boolean <optional>
 true
hideConfirmButton Boolean <optional>
 true
confirmButtonOptions ConfirmButtonOptions <optional>
styleModifier ModalStyleModifier <optional>
closeButtonIcon React.ReactNode <optional>
subHeaderContent React.ReactNode <optional>

The additional content that displays after the title in the header.
footerContent React.ReactNode <optional>
cancelButtonContent String | React.ReactNode <optional>

Allows you to replace the default cancel button text with an element (e.g. an SVG icon), a component or a string.

View Source components/Modal.jsx, line 66

Object

# ModalStyleModifier

Allows you to modify the style of the different elements of the modal by adding additional CSS classes to them.

Properties:
Name Type Description
backdrop String
contentContainer String
header String
title String
mainContent String
footer String
confirmButton String
cancelButton String
closeButton String
closeButtonIcon String

View Source components/Modal.jsx, line 38