ripple-notify

Ripple notify is a sleek and efficient notification package designed to deliver subtle yet effective alerts across various digital platforms. Its intuitive design seamlessly integrates into web and mobile applications, providing unobtrusive notifications that capture user attention without disrupting workflow. Stay informed with Ripple notify's prompt and seamless communication.

Demo

Installation

You can install this package via npm:

npm i ripple-notify

Usage

After successful installation, you can import the package and use it in your project. You can customize the notification as per your need. You need a ripple.js to your project root folder to customize the notification globally. You can customize the timeout, animation speed, colors and many more.

File name must be ripple.js and the content should be like below:

export const RippleConfig = {
    animationSpeed: '0.5s',
    colorful: true,
    duration: 500,
    icon: true,
    position: 'bottom-right',
    progressBar: true,
    timeout: 3000,
    colors: {
        success: {
            backgroundColor: '#ECFDF3',
            color: '#008A2E',
            borderColor: '#D3FDE5',
            progressBarColor: '#008A2E',
        },
        error: {
            backgroundColor: '#FFF0F0',
            color: '#E60000',
            borderColor: '#FFE0E1',
            progressBarColor: '#E60000',
        },
        info: {
            backgroundColor: '#F0F8FF',
            color: '#0973DC',
            borderColor: '#D3E0FD',
            progressBarColor: '#0973DC',
        },
        warning: {
            backgroundColor: '#FFFCF0',
            color: '#DC7609',
            borderColor: '#FDF5D3',
            progressBarColor: '#DC7609',
        },
        default: {
            backgroundColor: '#FFFFFF',
            color: '#171717',
            borderColor: '#EDEDED',
            progressBarColor: '#171717',
        }
    }
};

Some of the options you can customize are:

• timeout: Represents the time in milliseconds that the notification will be displayed. Default is 3000.

• animationSpeed: Animation speed of the notification. Default is 0.5s.

• duration: It will disappear after the duration. Default is 500.

• colorful: If you want to show the colorful notification, you can set it to true. Default is false.

• icon: If you don't want to show the icon, you can set it to false. Default is true.

• position: You can customize the position of the notification. Available options are top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.

• progressBar: Progressbar displayed relatively true, false.

• progressBarColor: You can customize the progress bar color.

• onHover: When the mouse enters hover, it will stop, on the mouse leaves it will start again.

• onClick: On click on the toaster, and it will be removed immediately.

Laravel Usage

To use in laravel based project, you need to include below code in your resources/app.js file.

import RippleNotify  from 'ripple-notify';

const ripple = RippleNotify;

window.ripple = ripple;

And then add the below code in your resources/app.css file.

@import "ripple-notify/styles.css";

HTML Usage

For normal html usage, you need to include the styles.css file in your project.

<link rel="stylesheet" href="node_modules/ripple-notify/styles.css">

Initialize the ripple in your project.

<script type="module">
    import RippleNotify from './node_modules/ripple-notify/index.js';

    const ripple = RippleNotify;

    window.ripple = ripple;
</script>

Documentation

Provide details about the functions, classes, or methods exposed by your package. Include parameters, return values, and usage examples. Check the documentation to get you started with the package here.

Release Notes

You can find the release note for the latest release here.

License

This project is licensed under the ISC License - see the LICENSE.md file for details.

Acknowledgments

Author