#Modal Setup

#Installation

yarn add @faceless-ui/modal

First, wrap your app with the provider. This component does not render anything and should be nearest to the top of your app as possible. This is where the global settings are defined.

Anywhere inside of this, render the <ModalContainer>. This is where each modal will portal into so its best to keep this relatively high in your tree.

import React from 'react';
import { ModalProvider, ModalContainer } from '@faceless-ui/modal';

export const MyApp = () => {
  return (
    <ModalProvider transTime={250}>
      ...
      <ModalContainer />
    </ModalProvider>
  )
}

Now to create a modal, render a <Modal> component anywhere in your app. The only required prop is the unique slug that identifies this modal. Then, the simplest way to open and close the modal is to use the <ModalToggler> component. It takes the slug of any modal and toggles it open or closed based on the current state of that modal.

import React from 'react';
import { Modal, ModalToggler } from '@faceless-ui/modal';

export const MyComponent = () => {
  return (
    <div>
      <Modal slug="my-modal">
        <h1>
          Hello, world!
        </h1>
      </Modal>
      <ModalToggler slug="my-modal">
        Toggle
      </ModalToggler>
    </div>
  )
}

Alternatively, you could build your own button. To do this, the toggleModal method can be directly accessed from the modal context with the useModal hook.

import React from 'react';
import { useModal } from '@faceless-ui/modal';

export const MyComponent = (props) => {
  const { toggleModal } = useModal();

  return (
    <button
      onClick={() => toggleModal('my-modal')}
      type="button"
    >
      Toggle
    </button>
  )
}

It is also possible to open and close modals with the URL or your router, see Routing for full details. For more advanced setups, see the full API reference.

#Transitions

The modal component uses React Transition Group to animate the opening and closing of the modal based on transTime. This will add and remove transition classes to your DOM element which you can target from a stylesheet.

Here's a basic example in SCSS that fades a modal in and out. You can easily customize these classes using classPrefix prop.

.modal {
  will-change: opacity;
  transition: opacity 250ms linear; // NOTE: must match your 'transTime' prop
  opacity: 0;

  &:global(.modal-item--appearActive),
  &:global(.modal-item--appearDone),
  &:global(.modal-item--enterActive),
  &:global(.modal-item--enterDone) {
    opacity: 1;
  }

  &:global(.modal-item--exitActive),
  &:global(.modal-item--exitDone) {
    opacity: 0;
  }
}