
Security News
PodRocket Podcast: Inside the Recent npm Supply Chain Attacks
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
@bolttech/atoms-notification
Advanced tools
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 type NotifyProps
.
Install the Notification
package on your project, with the following command:
npm i @bolttech/atoms-notification@version
There are 2 ways of using the Notification component
. One is displaying it as a toast on the middle top of your application (or any other place you append it to) and as a block component.
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>{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,
})
}
/>
);
};
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.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}
/>
);
};
FAQs
## Summary
The npm package @bolttech/atoms-notification receives a total of 140 weekly downloads. As such, @bolttech/atoms-notification popularity was classified as not popular.
We found that @bolttech/atoms-notification demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.