Dynamically create react-bootstrap toasts via a simple api.
https://jukanntenn.github.io/react-bootstrap-toasts/
# npm
npm install react-bootstrap-toasts
# yarn
yarn add react-bootstrap-toasts
# pnpm
pnpm add react-bootstrap-toasts
1: Wrap your app inside a ToastsProvider component:
import { ToastsProvider as BootstrapToastsProvider } from 'react-bootstrap-toasts';
<BootstrapToastsProvider>
<App />
</BootstrapToastsProvider>;2: Use useToasts hook:
import { Button } from 'react-bootstrap';
import { useToasts } from 'react-bootstrap-toasts';
function App() {
const toasts = useToasts();
return (
<Button
onClick={() => {
toasts.show({
headerContent: 'Bootstrap',
bodyContent: 'Toast body content.',
toastProps: {
bg: 'primary',
},
});
}}
>
Show toast
</Button>
);
}toasts.show method accepts a toastOptions argument to control behavior of the created toast. Here is toastOptions type definition:
type ToastOptions<T extends ToastProps> = {
headerContent: string | JSX.Element;
bodyContent: string | JSX.Element;
toastProps?: T;
toastHeaderProps?: ToastHeaderProps;
toastBodyProps?: BsPrefixProps & HTMLAttributes<ElementType>;
};headerContent: Child elements of react-bootstrap Toast.Header component.
bodyContent: Child elements of react-bootstrap Toast.Body component.
toastProps: A ToastProps object which will be passed down to react-bootstrap Toast component.
toastHeaderProps: A ToastHeaderProps object which will be passed down to react-bootstrap Toast.Header component.
toastBodyProps: A object which will be passed down to react-bootstrap Toast.Body component.
For example, to create an autohide toast with contextual danger variation:
import { Button } from 'react-bootstrap';
import { useToasts } from 'react-bootstrap-toasts';
function App() {
const toasts = useToasts();
return (
<Button
onClick={() => {
toasts.show({
headerContent: <span className="me-auto">Bootstrap</span>,
bodyContent: 'Toast body content.',
toastProps: {
bg: 'danger',
autohide: true,
delay: 3000,
},
});
}}
>
Show toast
</Button>
);
}For more details, please check react-bootstrap toasts API.
ToastsProvider accepts a toastContainerProps prop, which is a ToastContainerProps object that will be passed down to react-boostrap ToastContainer component.
Usually you want this to control the position where toasts to place or apply additional css style to the toast container.
The example below shows how to set all toasts should be placed at top-end of the viewport and also set the toast container's padding:
import { ToastsProvider as BootstrapToastsProvider } from 'react-bootstrap-toasts';
<BootstrapToastsProvider toastContainerProps={{ position: 'top-end', className: 'p-2' }}>
<App />
</BootstrapToastsProvider>;The default number of toasts displayed is infinite. You can set limit to control maximum number of toasts displayed on screen. If number of toasts exceeds this value, oldest toast would be removed.
import { ToastsProvider as BootstrapToastsProvider } from 'react-bootstrap-toasts';
<BootstrapToastsProvider limit={3}>
<App />
</BootstrapToastsProvider>;The toasts.show method returns an id of the created toast which can be used to hide the toast manually via toasts.hide method:
import { useState } from 'react';
import { Button } from 'react-bootstrap';
import type { ToastIdType } from 'react-bootstrap-toasts';
import { useToasts } from 'react-bootstrap-toasts';
function App() {
const toasts = useToasts();
const [toastId, setToastId] = useState<ToastIdType | undefined>();
{
toastId === undefined ? (
<Button
className="me-3"
onClick={() => {
const id = toasts.show({
headerContent: <span className="me-auto">Bootstrap</span>,
bodyContent: 'Toast body content.',
});
setToastId(id);
}}
>
Show toast
</Button>
) : (
<Button
variant="danger"
onClick={() => {
toasts.hide(toastId);
setToastId(undefined);
}}
>
Hide toast
</Button>
);
}
}react-bootstrap provides some contextual variations of toasts. react-bootstrap-toasts provides a corresponding shortcut method for each contextual variation. For example:
const toasts = useToasts();
// create a contextual warning toast
toasts.warning({
headerContent: <span className="me-auto">Bootstrap</span>,
bodyContent: 'Toast body content.',
});
// is equivalent to
toasts.show({
headerContent: <span className="me-auto">Bootstrap</span>,
bodyContent: 'Toast body content.',
toastBodyProps: {
bg: 'warning',
},
});All available shortcut methods:
toasts.info(toastOptions: ToastOptions<ToastPropsOmitBg>): ToastIdType;
toasts.primary(toastOptions: ToastOptions<ToastPropsOmitBg>): ToastIdType;
toasts.secondary(toastOptions: ToastOptions<ToastPropsOmitBg>): ToastIdType;
toasts.success(toastOptions: ToastOptions<ToastPropsOmitBg>): ToastIdType;
toasts.danger(toastOptions: ToastOptions<ToastPropsOmitBg>): ToastIdType;
toasts.warning(toastOptions: ToastOptions<ToastPropsOmitBg>): ToastIdType;
toasts.dark(toastOptions: ToastOptions<ToastPropsOmitBg>): ToastIdType;
toasts.light(toastOptions: ToastOptions<ToastPropsOmitBg>): ToastIdType;- Improving documentation.
- Smoother animation of toast transition.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent