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.
To install the package, run:
npm install react-cool-popup
Here’s a screenshot of the package in action:
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;
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"
.
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;
- 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.