Customizable modal package : fv-modal-react

Presentation

This is the repository of the modal package : fv-modal-react. View the composant Modal.jsx in src/components/Modals.jsx

• repository : https://github.com/FABIEN-T/P14-modal-react

• package npm : https://www.npmjs.com/package/fv-modal-react

Installing the package

1/ Install package :

npm i fv-modal-react

2/ Import the component from the library :

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

3/ Place this state hook (concerning the opening/closing of the modal) at the start of the function that uses the Modal component :

const [isOpen, setIsOpen] = useState(false)

4/ In the return of the function, call the Modal component with at least the setIsOpen and text props :

{isOpen && <Modal setIsOpen={setIsOpen} text={'Hello ' + name} />}

5/ Example :

import React, { useState } from 'react'
import { Modal } from '../components/Modal'

export default function Home() {
  const [isOpen, setIsOpen] = useState(false)
  const name = 'John Smith'

  return (
    <>
      <h1>Modal Test</h1>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && <Modal setIsOpen={setIsOpen} text={'Hello ' + name} />}
    </>
  )
}

6/ Customize the modal by adding props :

<Modal
  setIsOpen={setIsOpen}
  text={'Hello ' + name}
  // Custom the background of the modal
  modalBgColor={'midnightblue'}
  modalBorder={'3px solid white'}
  modalBorderRadius={'20px'}
  // Custom the closing cross
  crossCloseBg={'red'}
  crossCloseColor={'white'}
  crossCloseBorder={'3px solid white'}
  // Custom the font
  fontFamily={'Trebuchet MS'}
  fontSize={'20px'}
  fontWeight={'bold'}
  fontColor={'white'}
  textAlign={'center'}
/>

Prerequisites

Dependencies

DevDependencies