web-notification-react

WebNotification Component

The WebNotification component is a React functional component that allows you to display web notifications with customizable options.

Installation

To use the WebNotification component, you can include it in your project files directly or install it as a package if you plan to distribute it. For direct use, ensure you have React and ReactDOM installed in your project.

Usage

Import the Component

First, import the WebNotification component in your React file:

import React from 'react';
import ReactDOM from 'react-dom';
import { WebNotification } from './path/to/WebNotification';

const App = () => {
    const handleNotificationClick = () => {
        alert('Notification clicked!');
    };

    return (
        <div>
            <h1>Testing WebNotification Component</h1>
            <WebNotification
                title='Falkon SMS'
                icon='path/to/icon.png'
                body='This is the body of the notification'
                timeout={10000}
                ignore={false}
                onClickFn={handleNotificationClick}
            />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('app'));

Prop	Type	Required	Default	Description
title	string	Yes		The title of the notification.
icon	string	No		URL of an icon to be displayed in the notification.
body	string	No		The body text of the notification.
timeout	number	No	5000	Duration (in milliseconds) before the notification automatically closes.
ignore	boolean	Yes		If true, the notification will not be shown.
onClickFn	function	No		Function to be called when the notification is clicked.