Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@ehynds/react-toast
Advanced tools
A deliberately minimal React toast component with an imperative API.
$ npm install --save @ehynds/react-toast
# or
$ yarn add @ehynds/react-toast
import { ToastProvider, useToast } from '@ehynds/react-toast';
// Somewhere up high in the tree
const App = () => (
<ToastProvider>
<SomeComponent />
</ToastProvider>
);
const SomeComponent = () => {
const toast = useToast();
const onClick = () => {
toast.success('It worked!');
// OR:
// toast.error('Error toast');
// toast.info('Info toast');
};
return <a onClick={onClick}>Show a "success" toast</a>;
};
Pass containerOptions
to customize the element toasts are rendered into, and pass toastOptions
to set defaults for all rendered toasts.
const containerOptions: Partial<ContainerOptions> = {
className: 'toast-container'
};
const defaultToastOptions: Partial<ToastOptions> = {
position: 'top-right
};
<ToastProvider
containerOptions={containerOptions}
toastOptions={defaultToastOptions}
/>
You can also pass ToastOptions
into each toast individually:
const { success } = useToast();
success('It worked!', { autoHide: false });
Option | Description | Default |
---|---|---|
target | A reference to an Element where toasts will be rendered into | document.body |
className | A class name to attach to the container | None |
style | An object of CSS properties to attach to the container | None |
Option | Description | Default |
---|---|---|
autoHide | Whether or not each toast should automatically disappear after autoHideDuration seconds | true |
autoHideDuration | How long (in seconds) until toasts disappear | 5000 |
position | Where should toast appear? One of: top-left , top-center , top-right | top-center |
onClick | A handler to capture clicks on the toast. The handler receives an object as its only argument with a dismiss function to dismiss the toast. | None |
className | A class name to attach to the toast | None |
style | An object of CSS properties to attach to the toast | None |
const { success } = useToast():
success('Click me to dismiss', {
onClick: ({ dismiss }) => dismiss()
});
FAQs
React toast notification component
We found that @ehynds/react-toast demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.