Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vidit-kushwaha/react-popupify
React Popupify is a simple and easy to use popup component for React applications.
https://github.com/vidit-kushwaha/react-popupify
component javascript popup react react-component react-popup
Last synced: about 9 hours ago
JSON representation
React Popupify is a simple and easy to use popup component for React applications.
- Host: GitHub
- URL: https://github.com/vidit-kushwaha/react-popupify
- Owner: Vidit-Kushwaha
- License: mit
- Created: 2024-05-30T10:48:45.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-30T06:59:40.000Z (4 months ago)
- Last Synced: 2024-10-08T15:41:32.943Z (29 days ago)
- Topics: component, javascript, popup, react, react-component, react-popup
- Language: TypeScript
- Homepage: https://docs-react-popupify.onrender.com/
- Size: 1.03 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React-Popupify
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Documentation](#documentation)
- [Contributing](#contributing)
- [Release Notes](#release-notes)
- [License](#license)
## Features
- **Easy Integration**: Simple and intuitive API for quick integration.
- **Custom Animations**: Supports various animation types such as `bounce`, `flip`, `zoom`, and `fade`.
- **Auto-Close**: Option to auto-close the popup after a specified duration.
- **Customizable Close Button**: Flexible options for close button customization.
- **Event Handlers**: Callbacks for when the popup is entered and exited.
- **Esc Key and Outside Click**: Configurable options to close the popup using the escape key or clicking outside.
## Installation
With npm
```
npm install --save react-popupify
```
Adding css
```html
import "react-popupify/dist/bundle.css";
```
### The Gist
```jsx
import React from 'react';
import { showPopup } from 'react-popupify'
import "react-popupify/dist/bundle.css";
const App = () => {
const popup = () => showPopup('customPopupId', { open: true })
return (
Show Popup!
);
}
export default App
```
./component/CustomPopup.tsx
```jsx
import React from 'react';
import { Popup } from 'react-popupify';
const CustomPopup = () => {
return (
Say Hello to React-Poupify !!
);
}
export default CustomPopup
```
## Documentation
Check the [documentation](https://docs-react-popupify.onrender.com/) to get you started!
## Contributing
We welcome contributions! Whether you're a seasoned developer or a curious enthusiast, there are ways to get involved:
- **Bug fixes and improvements:** Find any issues? Submit a pull request!
- **New features:** Have an idea for a cool feature? Let's discuss it in an issue!
- **Documentation:** Improve the project's documentation and website.
- **Spread the word:** Share the project with your network and help it grow!
You can see contribution guidelines [here](https://github.com/Vidit-Kushwaha/react-popupify/blob/main/CONTRIBUTING.md)
## Release Notes
You can find the release note for the latest release [here](https://github.com/Vidit-Kushwaha/react-popupify/releases/latest)
You can browse them all [here](https://github.com/Vidit-Kushwaha/react-popupify/releases)
## License
This project is licensed under the MIT License. See the [LICENSE](https://github.com/Vidit-Kushwaha/react-popupify/blob/main/LICENSE) file for details.