Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
@kano/kbc-toast
Advanced tools
Readme
A manager and a set of toast configurations.
This package provides a context with a global toastManager
that you can use to trigger toasts.
To set it up, add the following provider:
import { ToastManagerProvider } from '@kano/kbc-toast';
ReactDOM.render(
<ToastManagerProvider config={{}} >
{/* A component that will trigger a toast. */}
<Component prop="Hello" />
</ToastManagerProvider>
);
You can trigger a toast like so
import { withToastManager, IToastManagerAPI } from '@kano/kbc-toast';
interface ComponentProps extends IToastManagerAPI {
prop: string;
}
const Component = withToastManager(({ prop, toastManager }: ComponentProps) => {
const handleClick = () => {
toastManager.queueToast(
'notice',
'consent-needed', /* Toast id */
{
icon: 'Info',
title: 'Can\'t do this',
message: 'You need permission to click this button'
}
);
};
return <button className="component" onClick={handleClick}>{prop}</button>;
});
The first parameter selects which toast component to use (in this case notice
). The second
parameter is custom toast id that you can use to refer to the toast later. The last parameter
will be passed as props to the toast component.
toastManager.current
has the currently displayed toast.
toastManager.current.id
has the id that you provided as a second parameter.
You can dismiss it by calling current.dismiss()
. The toast manager will show the next toast in
the queue. You can also cancel the entire queue by calling current.cancel()
.
## Toast types
Here are the toast types currently available. To add a new one, create a new file in the toasts/
directory.
A notice with a customisable icon, title and message.
Example:
toastManager.queueToast(
'notice',
'consent-needed',
{
icon: 'Info',
title: 'Can\'t do this',
message: 'You need permission to click this button'
}
);
A cookie consent with Allow, Deny and close dismiss buttons.
Example:
toastManager.queueToast(
'cookie-consent',
'rich-teas',
{
onAllow() {
console.log('COOL');
},
onDeny() {
console.log('NOT COOL');
},
}
);
FAQs
Toast manager.
The npm package @kano/kbc-toast receives a total of 5 weekly downloads. As such, @kano/kbc-toast popularity was classified as not popular.
We found that @kano/kbc-toast demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 17 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
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.