react-popupify

React-Popupify

Table of Contents

• Features
• Installation
• Documentation
• Contributing
• Release Notes
• 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

import "react-popupify/dist/bundle.css";

The Gist

  import React from 'react';

  import { showPopup } from 'react-popupify'
  import "react-popupify/dist/bundle.css";
  
  const App = () => {

  const popup = () => showPopup('customPopupId', { open: true })

    return (
      <div>
        <button onClick={popup}>Show Popup!</button>
        <CustomPopup />
      </div>
    );
  }

export default App

./component/CustomPopup.tsx

  import React from 'react';
  import { Popup } from 'react-popupify';

  const CustomPopup = () => {
  
    return (
          <Popup
            popupId="customPopupId"
            animation="bounce"
            open={false}
            closeOnEscape={true}
            closeOnOutsideClick={true}
            closeButton={true}
        >
          Say Hello to React-Poupify !!
        </Popup>
    );
  }

export default CustomPopup

Documentation

Check the documentation 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

Release Notes

You can find the release note for the latest release here

You can browse them all here

License

This project is licensed under the MIT License. See the LICENSE file for details.