Toast Alerts

Here we are using React-Toastify plugin for toast alerts. View full documentation here.

Basic example

All the toast methods return a toastId except dismiss and isActive. The toastId can be used to avoid duplicate toast alerts and remove a toast programmatically or to check if the toast is displayed. You can see all the toast props here

Preview

Jsx

import React from 'react';
import { Button } from 'react-bootstrap';
import { toast } from 'react-toastify';

const BasicToastExample = () => {
    //Info Toast
    const InfoMessage = () => {
        toast.info(' John! Recently joined twitter.', {
            toastId: 'toast1',
            icon: <i style={{ color: "#3498db" }} className="ti-twitter-alt"></i>,
            position: "top-left",
            theme: 'light',
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,

        })
    }

    //Warning Toast
    const WarningMessage = () => {
        toast.warn("This is a warning toast", {
            toastId: "toast2",
            position: "top-right",
            theme: "light",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,

        })
    };

    //Success Toast 
    const SuccessMessage = () => {
        toast.success('Test Complete Successfully', {
            toastId: "toast3",
            position: "bottom-left",
            theme: "light",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
        })
    };

    //Error Toast
    const ErrorMessage = () => {
        toast.error("Please try again later!", {
            toastId: "toast4",
            position: "bottom-right",
            className: 'jq-toast-danger',
            theme: 'light',
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
        })
    }

  return (
    <>
        <Button variant="primary" onClick={() => toast("🦄 This is a default toast message")} >Default Message</Button>
        <Button variant="info" onClick={InfoMessage}>Info Message</Button>
        <Button variant="warning" onClick={WarningMessage}>Warning Message</Button>
        <Button variant="success" onClick={SuccessMessage}>Success Message</Button>
        <Button variant="danger" onClick={ErrorMessage}>Error Message</Button>
    </>
  );
};

export default BasicToastExample;

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

Inverse Toast Alerts

Use theme:"colored" option for colored or inverse toast alert

Preview

Jsx

import React from 'react';
import { Button } from 'react-bootstrap';
import { toast } from 'react-toastify';

const InverseToastExample = () => {
    //Info Toast
    const InfoMessage = () => {
        toast.info(' John! Recently joined twitter.', {
            icon: <i className="ti-twitter-alt"></i>,
            position: "top-left",
            theme: 'colored',
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,

        })
    }

    //Warning Toast
    const WarningMessage = () => {
        toast.warn("This is a warning toast", {
            position: "top-right",
            theme: "colored",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,

        })
    };

    //Success Toast 
    const SuccessMessage = () => {
        toast.success('Test Complete Successfully', {
            position: "bottom-left",
            theme: "colored",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
        })
    };

    //Error Toast
    const ErrorMessage = () => {
        toast.error("Please try again later!", {
            position: "bottom-right",
            className: 'jq-toast-danger',
            theme: 'colored',
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
        })
    }

  return (
    <>
        <Button variant="primary" onClick={() => toast("🦄 This is a default toast message",{ theme: "colored" })} >Default Message</Button>
        <Button variant="info" onClick={InfoMessage}>Info Message</Button>
        <Button variant="warning" onClick={WarningMessage}>Warning Message</Button>
        <Button variant="success" onClick={SuccessMessage}>Success Message</Button>
        <Button variant="danger" onClick={ErrorMessage}>Error Message</Button>
    </>
  );
};

export default InverseToastExample;

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

Toastr Alerts positions

You can set position option like (position: 'top-right') in toast function or <ToastContainer /> component.

Preview

Jsx

import React from 'react';
import { Button } from 'react-bootstrap';
import { faGear } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { toast } from 'react-toastify';

const ToastAlertsPositions = () => {
    const ToastMessage = (position) => {
        const variants = (['info', 'success', 'warning', 'error', 'default']);
        const rndmitem = Math.floor(Math.random() * variants.length);
        const types = variants[rndmitem];

        toast("This is a toast message on "$"{position}", {
            type: types,
            icon: <FontAwesomeIcon icon={faGear} size="lg" spin />,
            position: position,
            theme: 'colored',
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: false

        })
    }

  return (
    <>
        <Button variant="secondary" onClick={() => ToastMessage('top-left')}>Top left</Button>
        <Button variant="secondary" onClick={() => ToastMessage('top-right')}>Top right</Button>
        <Button variant="secondary" onClick={() => ToastMessage('bottom-left')}>Bottom left</Button>
        <Button variant="secondary" onClick={() => ToastMessage('bottom-right')}>Bottom right</Button>
        <Button variant="secondary" onClick={() => ToastMessage('top-center')}>Top center </Button>
        <Button variant="secondary" onClick={() => ToastMessage('bottom-center')}>Bottom center </Button>
    </>
  );
};

export default ToastAlertsPositions;

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

Basic example
Tostr inverse
Toastr Alerts positions