JSPM

Package Exports

ripple-notify
ripple-notify/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ripple-notify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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 = {
    timeout: 3000,
    animationSpeed: '0.5s',
    duration: 500,
    colorful: false,
    icon: true,
    position: 'top-right',
    colors: {
        success: {
            backgroundColor: '#ECFDF3',
            color: '#008A2E',
            borderColor: '#D3FDE5'
        },
        error: {
            backgroundColor: '#FFF0F0',
            color: '#E60000',
            borderColor: '#FFE0E1'
        },
        info: {
            backgroundColor: '#F0F8FF',
            color: '#0973DC',
            borderColor: '#D3E0FD'
        },
        warning: {
            backgroundColor: '#FFFCF0',
            color: '#DC7609',
            borderColor: '#FDF5D3'
        },
        default: {
            backgroundColor: '#FFFFFF',
            color: '#171717',
            borderColor: '#EDEDED'
        }
    }
};

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.

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

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

ripple-notify