Ripple Notify

A simple and lightweight toastr library

GitHub NPM

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.

Installation

npm i ripple-notify

Types

You can customize the type of toast you want to render, and pass an options object as the second argument.

ripple.default('Event has been created.')

ripple.success('You have achieved your goal 🏆')

ripple.info('Please provide more information.')

ripple.warning('Warning! This action is irreversible.')

ripple.error('Oops! Something went wrong.')

Usage

You need a ripple.js to your project root folder to customize the toastr globally. 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',
        }
    }
};

Laravel

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 based

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.

Position

You can customize the position of the toastr. Available options are

ripple.default('Event has been created.', {position: 'top-left'})

ripple.success('You have achieved your goal 🏆', {position: 'top-center'})

ripple.info('Please provide more information.', {position: 'top-right'})

ripple.warning('Warning! This action is irreversible.', {position: 'bottom-left'})

ripple.error('Oops! Something went wrong.', {position: 'bottom-center'})

ripple.success('You have achieved your goal 🏆', {position: 'bottom-right'})

Colored

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

ripple.success('You have achieved your goal 🏆', {colorful: true})

ripple.error('Oops! Something went wrong.', {colorful: false})

colorful: false,
colors: {
    info: {
        backgroundColor: '#ECFDF3',
        color: '#008A2E',
        borderColor: '#D3FDE5'
    },
}

ripple.error('Oops! Something went wrong.', {colorful: true, backgroundColor: '#FFF0F0', color: '#E60000', borderColor: '#FFE0E1'})

Icon

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

ripple.success('You have achieved your goal 🏆', {icon: true})

ripple.error('Oops! Something went wrong.', {icon: false})

Progress bar

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

ripple.success('You have achieved your goal 🏆', {progressBar: true})

ripple.error('Oops! Something went wrong.', {progressBar: false})

Progress bar color customization

You can customize the progress bar color.

ripple.success('This is default color', {progressBar: true})

ripple.success('Event has been created.', {progressBarColor: '#43e046'})

Available options

Property	Description	Default
types	You can customize the type of toast you want to render default, success, error, info, warning	-
position	You can customize the position of the toastr. top-left, top-center, top-right, bottom-left, bottom-center, bottom-right	bottom-right
colored	If you want to show the colorful toastr, you can set it to true	false
icon	Icon displayed in start of toast's text. true, false	true
progressBar	Progressbar displayed relatively. true, false	true
progressBarColor	You can customize the progress bar color.	-
timeout	Represents the time in milliseconds that the notification will be displayed.	3000ms
animationSpeed	Animation speed of the notification	0.5s
duration	It will disappear after the duration.	500ms
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.	-

Release notes

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

Contributors

Find me on github @Md Rubel Rana