react-cool-popup

1.0.20 • Public • Published

React Cool Popup

The react-cool-popup allows you to display a popup message with customizable options, giving you greater flexibility in adjusting how the popup is shown.

Installation

To install the package, run:

npm install react-cool-popup

Screenshots

Here’s a screenshot of the package in action:

Package Screenshot Package Screenshot Package Screenshot

Usage

Import the Popup component and use it in your React application:

import React from 'react';
import Popup from 'react-cool-popup';

const App = () => {
  const handleButtonClick = () => {
    console.log('Button clicked');
  };

  return (
    <div>
      <Popup
        message="This is a popup message"
        duration={5000}
        status="ok"
        btnText="Done"
        btnFunc={handleButtonClick}
        blur={true}
      />
    </div>
  );
};

export default App;

Props

The Popup component accepts the following props:

  • message (string): The message to be displayed in the popup.
  • duration (number, optional): The duration (in milliseconds) for which the popup will be displayed. Default is 3000 (3 seconds).
  • status (string, optional): The status of the popup. Can be "ok", "warn", or "error". Default is "ok".
  • btnText (string, optional): The text to be displayed on the button. Default is "Done".
  • btnFunc (function, optional): A callback function to be called when the button is clicked. It will close the popup as well as call the function passed. Default is () => console.log("clicked").
  • blur (boolean, optional): Blurs the background. Default is "false".
  • strict (boolean, optional): Blocks the scrolling untill the popup is closed. Default is "false".

Example

Here is an example of how to use the Popup component:

import React from 'react';
import Popup from 'react-cool-popup';

const App = () => {

  const handleButtonClick = () => {
    console.log('Button clicked');
  };

  return (
    <div>
      <Popup
        message="This is a popup message"
        duration={5000}
        status="ok"
        btnText="Done"
        btnFunc={handleButtonClick}
        strict={true}
        blur={false}
      />
    </div>
  );
};

export default App;

Typescript

  • Just create this file at the root of your folder: react-cool-popup.d.ts
  • Add this code to the file: declare module 'react-cool-popup';
## License


This project is licensed under the MIT License.

Package Sidebar

Install

npm i react-cool-popup

Weekly Downloads

17

Version

1.0.20

License

MIT

Unpacked Size

46.7 kB

Total Files

5

Last publish

Collaborators

  • vivekkdev