Repository files navigation

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.

You can install this package via npm:

npm i ripple-notify

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 aripple.js to your projectroot folder to customize the notification globally. You can customize the timeout, animation speed, colors and many more.

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

exportconstRippleConfig={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.

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

importRippleNotifyfrom'ripple-notify';constripple=RippleNotify;window.ripple=ripple;

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

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

For normalhtml usage, you need to include thestyles.css file in your project.

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

Initialize theripple in your project.

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

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 packagehere.

You can find the release note for the latest releasehere.

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