@bolttech/atoms-notification
v0.13.0
Published
## Summary
Downloads
828
Maintainers
Keywords
Readme
Notification
Summary
The Notification
component is used to display notifications, either System level with toast like notifications with timer, or displaying notifications as block components. This component has some basic interactions between props that should be known, they are:
Duration: Allowed values are integers between 3 and 10, those values are in seconds. You can also use 0 as a value, and when it's provided, the notification will not disapear until the user clicks on the close icon.
onClose: If you use the component as a Block component, you should pass a onClose prop and deal with the visibility conditions on your side using the
NotificationProps
type. If you use it as a Toast, you should not pass the onClose prop and use the typeNotifyProps
.
Requirements
- Node 16
Installation
Install the Notification
package on your project, with the following command:
npm i @bolttech/atoms-notification@version
How to use
There are 2 ways of using the Notification component
. One is displaying it as a toast on the middle top of your application and as a block component.
1. useNotification hook (Toast)
To display a notification
as a Toast you should use the useNotification
hook. You should configure it as shown bellow:
// app.tsx or any other file you declare your providers
import { NotificationProvider } from '@bolttech/atoms-notification';
export function App(props) {
return (
<BolttechThemeProvider theme={bolttechTheme}>
<NotificationProvider translateY={'80px'}>{props.children}</NotificationProvider>
</BolttechThemeProvider>
);
}
// any file that should send a notification
import { useNotification, NotifyProps } from '@bolttech/atoms-notification';
const Example = ({ id, dataTestId, variant, duration, icon, text, fullWidth }: NotifyProps) => {
const { notify } = useNotification();
return (
<Button
size="sm"
variant="brand"
title="Click here to notify!"
onClick={() =>
notify({
id: `${id}-${Math.random() * 1234}`,
dataTestId: dataTestId,
variant: variant,
duration: duration,
icon: icon,
text: text,
fullWidth: fullWidth,
})
}
/>
);
};
You can pass a prop called translateY
that is a string to the provider, as it is a fixed
component, so it will display on top of your application. If you wish to translate it to be below your Header for an example, you can pass the height of your header to that prop and it will appear bellow it.
IMPORTANT: Please be sure that you are using a different Id
for each notification, as it's the property that is used to identify which notification should be removed from the list when timer run out.
2. Component (Block)
If you want to display just the Notification
as a block component to benefit of it's design, but without any other feature, you can use it the same way as using a normal component.
import { Notification, NotificationProps } from '@bolttech/atoms-notification';
const Example = ({ id, dataTestId, variant, duration, icon, text, fullWidth, onClose }: NotificationProps) => {
return <Notification id={id} dataTestId={dataTestId} variant={variant} duration={duration} icon={icon} text={text} fullWidth={fullWidth} onClose={onClose} />;
};