ripple-notify v1.2.2
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 is3000
.
animationSpeed
: Animation speed of the notification. Default is0.5s
.
duration
: It will disappear after the duration. Default is500
.
colorful
: If you want to show the colorful notification, you can set it totrue
. Default isfalse
.
icon
: If you don't want to show the icon, you can set it tofalse
. Default istrue
.
position
: You can customize the position of the notification. Available options aretop-left
,top-center
,top-right
,bottom-left
,bottom-center
,bottom-right
.
progressBar
: Progressbar displayed relativelytrue
,false
.
progressBarColor
: You can customize the progress bar color.
onHover
: When themouse enters
hover, it will stop, on themouse 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.