react-hook-modal

A custom modal, with a custom hook for modal handling in React App

Install

npm install --save react-hook-modal

Usage

The "react-hook-modal" api consists of a hook: useModal, a component containing the modals: Modal, and a HOC ModalDataContextProvider. react-hook-modal, uses the react Context api to exchange states and information to be rendered in the modal through all the components of our application.

1. Declare the HOC ModalDataContextProvider to wrap the entire application

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App/App';
import { ModalDataContextProvider } from 'react-hook-modal';

ReactDOM.render(
  <ModalDataContextProvider>
    <App />
  </ModalDataContextProvider>,
  document.getElementById('root')
);

2. Put the Modal component in the container component, e.g. App.

 ...
 return (
    <div className='App'>
      <Header />
      {/* Modal section here */}
      <Modal />
    </div>
  );

3. Use the custom hook function useModal to access to the functions to interact to the modal:

1. setComponentToRender(element: JSX.Element, options?: ModalOptions)
2. closeModal(data?: any)
3. setOptions(options?: ModalOptions)
4. const setFooter(footer: JSX.Element | null)

Example:

...
import { Modal, useModal } from 'react-hook-modal';
...
  const { setComponentToRender, closeModal } = useModal(onCloseModal);

  function onCloseModal(data){
      console.log("Modal closed",data);
  }
  return (
   <button
        style={{ color: '#fff' }}
        type="button"
        onClick={() => {
          setComponentToRender(<AccountCustomComponent />, {
            title: 'My Account',
            animation: true,
            closeOnBackgroundOrEsc: false,
          });
        }}
      >
        Open Modal
      </button>
  )

The Modal component has props to customize the styles of the container, header and body sections. here an example of setting different styles:

<Modal
  styles={{
    container: {
      backgroundColor: '#1C1C1C',
      color: '#fff',
      width: '55rem',
      maxHeight: '100vh',
      maxWidth: '100vw'
    },
    header: { backgroundColor: '#2C2C2C', color: '#fff' },
    body: { maxHeight: '80vh', padding: '0rem' }
  }}
/>

The Modal component has a prop called classContainer which defines a custom container Modal class but it is recommended include the following css styles.

.app-modal {
  position: fixed;
  max-height: 100vh;
  max-width: 100vw;
  z-index: 999;
  top: 50%;
  left: 50%;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  background-color: white;
  color: inherit;
  width: 50rem;
}

The setComponentToRender(element: JSX.Element, options?: ModalOptions) function takes a JSX.Element which can be a component or just an 'html' and renders it inside the body of the Modal.

options allow you to dynamically set the attributes and properties of the modal to be represented.

export interface ModalOptions {
  title?: string; // A tittle to be displayes in the header
  dataProps?: any; // A object pass to the state of the Modal to share data: we can access **const {dataToProps} =  useModal()
  width?: string | number; // Set the width for the modal
  height?: string | number; // Set the height for the modal
  closeOnBackgroundOrEsc?: boolean | undefined; // Closes the modal if we click outside the modal context or if we press the Esc key.
  resizable?: boolean; // Make a resizable Modal
  fullScreen?: boolean; // A complete viewport
  animation?: boolean; // Make a nice animation on open the modal
  footer?: JSX.Element | null | undefined; // A component for the footer
  darkMode?: boolean; // Enable dark mode
}

Demo

License

MIT © josealejandro2928