Easy-Toast-React-Bootstrap

An easy and flexible wrapper for Toast React Bootstrap, enabling you to create toasts from any part of your application with just a few easy steps.

Installation

1npm install easy-toast-react-bootstrap

or

1yarn add easy-toast-react-bootstrap

Usage

just 2 steps!

Step 1: EasyToastContainer

Add <EasyToastContainer> component as top level as possible.

Example:

1import {EasyToastContainer} from "easy-toast-react-bootstrap"; // Don't forget to import this
2
3export function App() {
4    return (
5        <EasyToastContainer position="top-start" className="p-3">
6            <App/>
7        </EasyToastContainer>
8    )
9}

Optional props of <EasyToastContainer> exactly like <ToastContainer> in React Bootstrap.

Step 2: useEasyToast

useEasyToast hook returns an array with exactly two values:

1. showToast(<Toast>...</Toast>) function: Call it Anywhere you need to show a toast. Give <Toast>...</Toast> component as the first argument.

2. closeToast(event) function: Call it for close the toast in onClick prop of <CloseButton/> or any button. Don't forget to give event of onClick as the first argument.

Example:

1import {useEasyToast} from "easy-toast-react-bootstrap";
2import {Toast, Stack, CloseButton} from "react-bootstrap";
3
4export function MyComponent() {
5    const [showToast, closeToast] = useEasyToast();
6    const handleOnClick = () => {
7        showToast(
8            <Toast
9                bg="success"
10                autohide
11                className="text-white"
12            >
13                <Stack direction="horizontal" gap={2}>
14                    <Toast.Body>My Toast Message!</Toast.Body>
15                    <CloseButton className="me-2 m-auto" variant="white" onClick={closeToast}/>
16                </Stack>
17            </Toast>
18        );
19    }
20    
21}

Example image:

Additional Options

• showToast() function has second argument for when multiple toasts exists: default is "addTop". If you want the new toast added from bottom of other toasts set it "addBottom".
• You can wrap <Toast>...</Toast> component inside your custom component and then give it to showToast() function. Example:

MyComponent.js

1import {useEasyToast} from "easy-toast-react-bootstrap";
2
3export function MyComponent() {
4    const [showToast, closeToast] = useEasyToast();
5    const handleOnClick = () => {
6        showToast(
7            <MyCustomToast
8                message="My Toast Message!"
9                bg="success"
10                onClose={closeToast}
11            />
12        );
13    }
14    
15}
16

MyCustomToast.js

1import {CloseButton, Stack, Toast} from "react-bootstrap";
2
3const MyCustomToast = ({message, bg, onClose}) => {
4    return (
5        <Toast
6            bg={bg}
7            autohide
8            className="text-white"
9        >
10            <Stack direction="horizontal" gap={2}>
11                <Toast.Body>
12                    {message}
13                </Toast.Body>
14                <CloseButton className="me-2 m-auto" variant="white" onClick={onClose}/>
15            </Stack>
16        </Toast>
17    );
18};
19
20export default MyCustomToast;
21

• onClose prop of <Toast> React-Bootstarp component not needed and deactive.

Contributing

If you would like to see additions/changes to this package you are always welcome to add some code or improve it.