https://github.com/mburakerman/reactplosive-modal

🔥 A simple React modal component with an explosion effect
https://github.com/mburakerman/reactplosive-modal

modal react react-modal

Last synced: 27 days ago
JSON representation

🔥 A simple React modal component with an explosion effect

• Host: GitHub
• URL: https://github.com/mburakerman/reactplosive-modal
• Owner: mburakerman
• License: mit
• Created: 2022-11-25T14:51:58.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-08-29T11:24:57.000Z (over 1 year ago)
• Last Synced: 2025-03-18T18:34:06.354Z (about 1 month ago)
• Topics: modal, react, react-modal
• Language: TypeScript
• Homepage: https://mburakerman.github.io/reactplosive-modal/
• Size: 24.3 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🔥 Reactplosive Modal

> A simple React modal component with an explosion effect




[![NPM](https://img.shields.io/npm/v/reactplosive-modal)](https://www.npmjs.com/package/reactplosive-modal)

![NPM License](https://img.shields.io/npm/l/reactplosive-modal)




## ⏬ Install

```js

npm i reactplosive-modal

```

## 🪡 Usage

```js

import ReactplosiveModal from "reactplosive-modal";

```

```html

const YourComponent = () => {

  const [isModalVisible, setIsModalVisible] = useState(false);

  return (

    Title}

      isVisible={isModalVisible}

      onClose={() => setIsModalVisible(false)}

    >

      
 Lorem ipsum dolor sit amet.

      I do nothing.

    

  );

};


```

## ⚙️ Props

```js

{

  title?: ReactNode,

  children: ReactNode,

  isVisible: boolean,

  width?: string, // default 500px

  onClose: (visibility: boolean) => void,

  outsideClickEnabled?: boolean, // default true

};

```

## ©️ License

Licensed under MIT