Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bmcmahen/toasted-notes
simple, flexible toast notifications for react
https://github.com/bmcmahen/toasted-notes
notifications react toast toast-message
Last synced: about 2 months ago
JSON representation
simple, flexible toast notifications for react
- Host: GitHub
- URL: https://github.com/bmcmahen/toasted-notes
- Owner: bmcmahen
- Created: 2018-06-13T23:08:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T17:36:33.000Z (almost 2 years ago)
- Last Synced: 2024-07-10T17:37:59.362Z (3 months ago)
- Topics: notifications, react, toast, toast-message
- Language: TypeScript
- Homepage: https://toasted-notes.netlify.com
- Size: 2.29 MB
- Stars: 255
- Watchers: 5
- Forks: 28
- Open Issues: 47
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Toasted-notes
[![npm package](https://img.shields.io/npm/v/toasted-notes/latest.svg)](https://www.npmjs.com/package/toasted-notes)
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=toasted%20notes%20is%20a%20react%20library%20for%20creating%20simple%2C%20flexible%20toast%20notifications.&url=https://github.com/bmcmahen/toasted-notes&hashtags=react,javascript)
[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social&logo=twitter)](
https://twitter.com/intent/follow?screen_name=benmcmahen
)A simple but flexible implementation of toast style notifications for React extracted from [Sancho UI](https://github.com/bmcmahen/sancho).
[View the demo and documentation](https://toasted-notes.netlify.com/).
## 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
```jsx
import toaster from "toasted-notes";
import "toasted-notes/src/styles.css"; // optional stylesconst HelloWorld = () => (
{
toaster.notify("Hello world", {
duration: 2000
});
}}
>
Say hello
);
```## API
The notify function accepts either a string, a react node, or a render callback.
```jsx
// using a string
toaster.notify("With a simple string");// using jsx
toaster.notify(Hi there);// using a render callback
toaster.notify(({ onClose }) => (
My custom toaster
Close me please
));
```It also accepts options.
```javascript
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.
```jsx
const CustomNotification = ({ title }) => {
const theme = useTheme();
return{title};
};const CustomNotificationWithTheme = withTheme(CustomNotification);
toaster.notify(() => );
```## Contributors
- [Einar Löve](https://github.com/einarlove)
## License
MIT
## Prior art
Way back, this was originally based on the wonderful implementation of notifications in [evergreen](https://evergreen.segment.com).