Como criar um React Modal com efeito de explosão

Um componente modal React que vem com um efeito de explosão quando a janela modal é iniciada.

Como usá-lo:

1. Instale e importe o ReactplosiveModal.

# Yarn
$ yarn add reactplosive-modal

# NPM
$ npm i reactplosive-modalimport ReactplosiveModal from "reactplosive-modal";

2. Uso básico.

const YourComponent = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  return (
    <ReactplosiveModal
      title={<h4>Modal Title</h4>}
      isVisible={isModalVisible}
      onClose={() => setIsModalVisible(false)}
    >
      <p>Modal Content</p>
      <button>Modal Button</button>
    </ReactplosiveModal>
  );
};

3. Adereços de componentes disponíveis.

{
  title?: ReactNode,
  children: ReactNode,
  isVisible: boolean,
  width?: string, // default: 500px
  onClose: (visibility: boolean) => void,
  outsideClickEnabled?: boolean, // default: true
};

Veja no GitHub: https://github.com/mburakerman/reactplosive-modal