Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

toasted-notes

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

toasted-notes

Flexible, easy to implement toast notifications for react

  • 3.2.0
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Toasted-notes

npm package Tweet Follow on Twitter

A simple but flexible implementation of toast style notifications for React extracted from Sancho UI.

View the demo and documentation.

Features

  • An imperative API. This means that you don't need to set component state or render elements to trigger notifications. Instead, just call a function.
  • Render whatever you want. Utilize the render callback to create entirely custom notifications.
  • Functional default styles. Import the provided css for some nice styling defaults or write your own styles.

Install

Install toasted-notes and its peer dependency, react-spring, using yarn or npm.

yarn add toasted-notes react-spring

Example

import toaster from "toasted-notes";
import "toasted-notes/src/styles.css"; // optional styles

const HelloWorld = () => (
  <button
    onClick={() => {
      toaster.notify("Hello world", {
        duration: 2000
      });
    }}
  >
    Say hello
  </button>
);

API

The notify function accepts either a string, a react node, or a render callback.

// using a string
toaster.notify("With a simple string");

// using jsx
toaster.notify(<div>Hi there</div>);

// using a render callback
toaster.notify(({ onClose }) => (
  <div>
    <span>My custom toaster</span>
    <button onClick={onClose}>Close me please</button>
  </div>
));

It also accepts options.

toaster.notify("Hello world", {
  position: "bottom-left", // top-left, top, top-right, bottom-left, bottom, bottom-right
  duration: null // This notification will not automatically close
});

Using Context

One downside to the current API is that render callbacks and custom nodes won't get access to any application context, such as theming variables provided by styled-components. To ensure that render callbacks have access to the necessary context, you'll need to supply that context to the callback.

const CustomNotification = ({ title }) => {
  const theme = useTheme();
  return <div style={{ color: theme.primary }}>{title}</div>;
};

const CustomNotificationWithTheme = withTheme(CustomNotification);

toaster.notify(() => <CustomNotificationWithTheme title="I am pretty" />);

Contributors

License

MIT

Prior art

Way back, this was originally based on the wonderful implementation of notifications in evergreen.

Keywords

FAQs

Package last updated on 24 Dec 2019

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc