React Modal Component With An Explosion Effect – ReactplosiveModal

Description:

A React modal component that comes with an explosion effect when the modal window is launched.

How to use it:

1. Install and import the ReactplosiveModal.

# Yarn
$ yarn add reactplosive-modal
# NPM
$ npm i reactplosive-modal

import ReactplosiveModal from "reactplosive-modal";

2. Basic usage.

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. Available component props.

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

Preview: