Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Contextual Notification

It uses the structure of default alerts in notification popup.

import React from 'react';
import { Button } from 'react-bootstrap';
import { Store } from 'react-notifications-component'

const ContextualNotifications = () => {
    const MyNotification = (type, Msg, position, screen, dismissIcon) => {
        Store.addNotification({
            message: Msg,
            type: type,
            insert: 'bottom',
            container: position,
            animationIn: ['animated bounceInDown'],
            animationOut: ['animated bounceOutUp'],
            dismiss: {
                duration: 5000,
                onScreen: screen,
                showIcon: dismissIcon,
            }

        });
    };

  return (
    <>
        <Button variant="primary" onClick={() => MyNotification('default', 'Primary Notification', 'top-right')}>Primary Message</Button>
        <Button variant="warning" onClick={() => MyNotification('warning', 'Warning Notification', 'top-right')}>Warning Message</Button>
        <Button variant="danger" onClick={() => MyNotification('danger', 'Danger Notification', 'top-right')}>Danger Message</Button>
        <Button variant="info" onClick={() => MyNotification('info', 'Info Notification', 'top-right')}>Info Message</Button>
        <Button variant="success" onClick={() => MyNotification('success', 'Success Notification', 'top-right')}>Success Message</Button>
    </>
  );
};

export default ContextualNotifications;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Dismissible Notification

In dismissible notification user can dismiss the alert notifications.

Preview

Jsx

import React from 'react';
import { Button } from 'react-bootstrap';
import { Store } from 'react-notifications-component'

const DismissibleNotifications = () => {
    const PrimaryNotification = () => {
        Store.addNotification({
            message: "teodosii@react-notifications-component example",
            type: "default",
            insert: "top",
            container: "top-right",
            animationIn: ['animated bounceInDown'],
            animationOut: ['animated bounceOutUp'],
            dismiss: {
                duration: 10000,
                onScreen: true,
                showIcon: true,
            }

        });
    };

    const WarningNotification = () => {
        Store.addNotification({
            title: "Wonderful!",
            message: "teodosii@react-notifications-component",
            type: "warning",
            insert: "top",
            container: "top-right",
            animationIn: ['animated bounceInDown'],
            animationOut: ['animated bounceOutUp'],
            dismiss: {
                duration: 10000,
                onScreen: true,
                showIcon: true,
            }
        });
    };

    const DangerNotification = () => {
        Store.addNotification({
            title: "Wonderful!",
            message: "teodosii@react-notifications-component",
            type: "danger",
            insert: "top",
            container: "top-right",
            animationIn: ['animated bounceInDown'],
            animationOut: ['animated bounceOutUp'],
            dismiss: {
                duration: 10000,
                onScreen: true,
                showIcon: true,
            }
        });
    };

  return (
    <>
        <Button variant="primary" onClick={PrimaryNotification} >Primary Message</Button>
        <Button variant="warning" onClick={WarningNotification}>Warning Message</Button>
        <Button variant="danger" onClick={DangerNotification}>Danger Message</Button>
        <Button variant="info" onClick={InfoNotification}>Info Message</Button>
        <Button variant="success" onClick={SuccessNotification}>Success Message</Button>
    </>
  );
};

export default DismissibleNotifications;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Position

You can change the position of notification according to your requirement.

Preview

Jsx

import React from 'react';
import { Button } from 'react-bootstrap';
import { Store } from 'react-notifications-component'

const NotificationPositions = () => {
    const myNotification = (position) => {

        Store.addNotification({
            title: "Title",
            message: "This is our custom notification at "$"{position} position",
            type: variant,
            insert: "top",
            container: position,
            animationIn: ["animate__animated", "animate__fadeIn"],
            animationOut: ["animate__animated", "animate__fadeOut"],
            dismiss: {
                duration: 10000,
                onScreen: true,
                showIcon: true,
            }

        });
    };

  return (
    <>
        <Button
            variant="primary"
            onClick={() => myNotification('top-right')}
        >
            Top Right
        </Button>
        <Button
            variant="warning"
            onClick={() => myNotification('bottom-right')}
        >
            Bottom Right
        </Button>
        <Button
            variant="danger"
            onClick={() => myNotification('top-left')}
        >
            Top Left
        </Button>
        <Button
            variant="success"
            onClick={() => myNotification('bottom-left')}
        >
            bottom Left
        </Button>
        <Button
            variant="info"
            onClick={() => myNotification('top-center')}
        >
            Top Center
        </Button>
        <Button
            variant="warning"
            onClick={() => myNotification('bottom-center')}
        >
            bottom Center
        </Button>
        <Button
            variant="dark"
            onClick={() => myNotification('center')}
        >
            Center
        </Button>
        <Button
            variant="secondary"
            onClick={() => myNotification('top-full')}
        >
            Top Full
        </Button>
        <Button
            variant="secondary"
            onClick={() => myNotification('bottom-full')}
        >
            Bottom Full
        </Button>
    </>
  );
};

export default NotificationPositions;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Animation

You can add animate.css animations.

Preview

Jsx

import React from 'react';
import { Button } from 'react-bootstrap';
import { Store } from 'react-notifications-component'

const NotificationAnimations = () => {
    const varients = (['success', 'danger', 'info', 'default', 'warning']);
    const [AnimationIn, setAnimationIn] = useState("bounce");
    const [AnimationOut, setAnimationOut] = useState("bounceOut");


    const handleAnimationIn = (e) => {
        console.log(e);
        setAnimationIn(e);
    }

    const handleAnimationOut = (e) => {
        console.log(e);
        setAnimationOut(e);
    }

    const MyNotification = () => {
        const rndmitem = Math.floor(Math.random() * varients.length);
        const variant = varients[rndmitem];

        Store.addNotification({
            message: "teodosii@react-notifications-component example",
            type: variant,
            insert: "top",
            container: 'top-left',
            animationIn: ["animate__animated animate__"$"{ AnimationIn }"],
            animationOut: ["animate__animated animate__"$"{ AnimationOut }"],
            dismiss: {
                duration: 5000,
                onScreen: true,
                showIcon: true,
            }

        });
    };

  return (
    <Row>
        <Col sm={4}>
            <Form.Select type='select' onChange={e => handleAnimationIn(e.target.value)}>
                <optgroup label="Attention Seekers">
                    <option value="bounce">bounce</option>
                    <option value="flash">flash</option>
                    <option value="pulse">pulse</option>
                    <option value="rubberBand">rubberBand</option>
                    <option value="flip">flip</option>
                    <option value="shakeX">shakeX</option>
                    <option value="shakeY">shakeY</option>
                    <option value="swing">swing</option>
                    <option value="tada">tada</option>
                    <option value="wobble">wobble</option>
                    <option value="jello">jello</option>
                </optgroup>

                <optgroup label="Bouncing Entrances">
                    <option value="bounceIn">bounceIn</option>
                    <option value="bounceInDown">bounceInDown</option>
                    <option value="bounceInLeft">bounceInLeft</option>
                    <option value="bounceInRight">bounceInRight</option>
                    <option value="bounceInUp">bounceInUp</option>
                </optgroup>
                <optgroup label="Fading Entrances">
                    <option value="fadeIn">fadeIn</option>
                    <option value="fadeInDown">fadeInDown</option>
                    <option value="fadeInDownBig">fadeInDownBig</option>
                    <option value="fadeInLeft">fadeInLeft</option>
                    <option value="fadeInLeftBig">fadeInLeftBig</option>
                    <option value="fadeInRight">fadeInRight</option>
                    <option value="fadeInRightBig">fadeInRightBig</option>
                    <option value="fadeInUp">fadeInUp</option>
                    <option value="fadeInUpBig">fadeInUpBig</option>
                </optgroup>

                <optgroup label="Flippers">
                    <option value="flipInX">flipInX</option>
                    <option value="flipInY">flipInY</option>
                </optgroup>

                <optgroup label="Lightspeed">
                    <option value="lightSpeedIn">lightSpeedIn</option>
                </optgroup>

                <optgroup label="Rotating Entrances">
                    <option value="rotateIn">rotateIn</option>
                    <option value="rotateInDownLeft">rotateInDownLeft</option>
                    <option value="rotateInDownRight">rotateInDownRight</option>
                    <option value="rotateInUpLeft">rotateInUpLeft</option>
                    <option value="rotateInUpRight">rotateInUpRight</option>
                </optgroup>

                <optgroup label="Sliding Entrances">
                    <option value="slideInUp">slideInUp</option>
                    <option value="slideInDown">slideInDown</option>
                    <option value="slideInLeft">slideInLeft</option>
                    <option value="slideInRight">slideInRight</option>

                </optgroup>

                <optgroup label="Zoom Entrances">
                    <option value="zoomIn">zoomIn</option>
                    <option value="zoomInDown">zoomInDown</option>
                    <option value="zoomInLeft">zoomInLeft</option>
                    <option value="zoomInRight">zoomInRight</option>
                    <option value="zoomInUp">zoomInUp</option>
                </optgroup>

                <optgroup label="Specials">
                    <option value="rollIn">rollIn</option>
                </optgroup>
            </Form.Select>

        </Col>
        <Col sm={4}>

            <Form.Select type='select' onChange={e => handleAnimationOut(e.target.value)}>
                <optgroup label="Bouncing Exits">
                    <option value="bounceOut">bounceOut</option>
                    <option value="bounceOutDown">bounceOutDown</option>
                    <option value="bounceOutLeft">bounceOutLeft</option>
                    <option value="bounceOutRight">bounceOutRight</option>
                    <option value="bounceOutUp">bounceOutUp</option>
                </optgroup>
                <optgroup label="Fading Exits">
                    <option value="fadeOut">fadeOut</option>
                    <option value="fadeOutDown">fadeOutDown</option>
                    <option value="fadeOutDownBig">fadeOutDownBig</option>
                    <option value="fadeOutLeft">fadeOutLeft</option>
                    <option value="fadeOutLeftBig">fadeOutLeftBig</option>
                    <option value="fadeOutRight">fadeOutRight</option>
                    <option value="fadeOutRightBig">fadeOutRightBig</option>
                    <option value="fadeOutUp">fadeOutUp</option>
                    <option value="fadeOutUpBig">fadeOutUpBig</option>
                </optgroup>

                <optgroup label="Flippers">
                    <option value="flipOutX">flipOutX</option>
                    <option value="flipOutY">flipOutY</option>
                </optgroup>

                <optgroup label="Lightspeed">
                    <option value="lightSpeedOut">lightSpeedOut</option>
                </optgroup>

                <optgroup label="Rotating Exits">
                    <option value="rotateOut">rotateOut</option>
                    <option value="rotateOutDownLeft">rotateOutDownLeft</option>
                    <option value="rotateOutDownRight">rotateOutDownRight</option>
                    <option value="rotateOutUpLeft">rotateOutUpLeft</option>
                    <option value="rotateOutUpRight">rotateOutUpRight</option>
                </optgroup>

                <optgroup label="Sliding Exits">
                    <option value="slideOutUp">slideOutUp</option>
                    <option value="slideOutDown">slideOutDown</option>
                    <option value="slideOutLeft">slideOutLeft</option>
                    <option value="slideOutRight">slideOutRight</option>

                </optgroup>

                <optgroup label="Zoom Exits">
                    <option value="zoomOut">zoomOut</option>
                    <option value="zoomOutDown">zoomOutDown</option>
                    <option value="zoomOutLeft">zoomOutLeft</option>
                    <option value="zoomOutRight">zoomOutRight</option>
                    <option value="zoomOutUp">zoomOutUp</option>
                </optgroup>

                <optgroup label="Specials">
                    <option value="hinge">hinge</option>
                    <option value="rollOut">rollOut</option>
                </optgroup>

            </Form.Select>

        </Col>
        <Col sm={4}>
            <button id="check_anim_notify" className="btn btn-info" onClick={MyNotification}>Check Animation</button>
        </Col>
    </Row>
  );
};

export default NotificationAnimations;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Custom URL

You can provide custom URLs inside notifications.

Preview

Jsx

import React from 'react';
import { Alert, Button } from 'react-bootstrap';
import { Store } from 'react-notifications-component';

const NotificationWithCustomUrl = () => {

    const CustomAlert = () => {
        return (
            <Alert variant="primary" className="m-0" style={{ borderRadius: 0 }} dismissible>
                Check out my twitter account by clicking on this <a href="https://twitter.com/hencework" className="alert-link" target='_blank' rel='noreferrer' >notification!</a>.
            </Alert>
        )
    }

    const myNotification = () => {
        Store.addNotification({
            content: CustomAlert,
            type: "default",
            insert: "top",
            container: 'top-right',
            animationIn: ['animated bounceInDown'],
            animationOut: ['animated bounceOutUp'],
            dismiss: {
                duration: 3000,
                showIcon: true
            }

        });
    };

  return <Button variant="primary" onClick={myNotification} >Custom URL</Button>;
};

export default NotificationWithCustomUrl;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Icon

Icon can improves the notifications.

Preview

Jsx

import React from 'react';
import { Alert, Button } from 'react-bootstrap';
import { Twitter } from 'react-feather';
import { Store } from 'react-notifications-component';

const NotificationWithIcons = () => {

    const CustomAlert = () => {
        return (
            <Alert variant="primary" className="m-0 alert-wth-icon" style={{ borderRadius: 0 }} dismissible>
                <span class="alert-icon-wrap">
                    <span class="feather-icon">
                        <Twitter />
                    </span>
                </span>
                Check out my twitter account by clicking on this <a href="https://twitter.com/hencework" className="alert-link" target='_blank' rel='noreferrer' >notification!</a>
            </Alert>
        )
    }

    const myNotification = () => {
        Store.addNotification({
            content: CustomAlert,
            type: "default",
            insert: "top",
            container: 'top-right',
            animationIn: ['animated bounceInDown'],
            animationOut: ['animated bounceOutUp'],
            dismiss: {
                duration: 3000,
                showIcon: true
            }

        });
    };

  return <Button variant="primary" onClick={myNotification} >Icon</Button>;
};

export default NotificationWithIcons;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

With Title

You can add titles inside notifications.

Preview

Jsx

import React from 'react';
import { Alert, Button } from 'react-bootstrap';
import { Twitter } from 'react-feather';
import { Store } from 'react-notifications-component';

const NotificationWithTitle = () => {

    const MyNotification = () => {
        Store.addNotification({
            title: "Wonderful Title!",
            message: "This is a notification with title",
            type: "info",
            insert: "top",
            container: "top-right",
            animationIn: ['animated bounceInDown'],
            animationOut: ['animated bounceOutUp'],
            dismiss: {
                duration: 10000,
                onScreen: true,
                showIcon: true,
            }
        });
    };

    const CustomAlert = () => {
        return (
            <Alert variant="primary" className="m-0" style={{ borderRadius: 0 }} dismissible>
                <Alert.Heading as="h4">
                    <span class="feather-icon me-2"><Twitter /></span>Follow!
                </Alert.Heading>
                <p>Check out my twitter account by clicking on this <a href="

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.