https://github.com/wintercounter/buttered-toast
An incredibly simple toast notification system for React.
https://github.com/wintercounter/buttered-toast
Last synced: 11 days ago
JSON representation
An incredibly simple toast notification system for React.
- Host: GitHub
- URL: https://github.com/wintercounter/buttered-toast
- Owner: wintercounter
- Created: 2023-08-11T12:41:54.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-11T14:14:51.000Z (almost 3 years ago)
- Last Synced: 2025-10-19T08:41:33.071Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 4.88 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# buttered-toast
An incredibly simple toast notification system for React.
- Only 894 byte (gzipped)
- No dependencies
- No styling, only logic
- No configuration
- No nonsense
- Render components
- No JSX during usage
This is a solution I'm using in several projects, so I decided to extract this into its own package. The existing
libraries out there require you to add JSX elements to your React tree and render them based on conditions (controlled
way). I never liked such solutions, I prefer a simple function call to show my toast.
## Installation
```bash
npm install buttered-toast
```
## Usage
### Add context provider
```javascript
import { ToastContextProvider } from 'buttered-toast'
const App = ({ children }) => {children}
```
### `useToast` hook
```javascript
import { useToast } from 'buttered-toast'
const Component = () => {
const { show } = useToast()
return show('Button clicked!')}>Click me!
}
```
## API and Customization
### Exports
- `ToastContextProvider`
- `useToast`
- `defaultOptions`
- `ToastContext`
### `ToastContextProvider`
This is a React context provider that provides the state for `useToast` hooks. You must have this at least once in your
React tree.
#### Props
- `options` - An object of options to override the default options. See `defaultOptions` for more information.
### `useToast`
This is a React hook that provides the `show` function to show a toast.
```js
const { show } = useToast()
```
#### `show`
This function takes a two arguments argument. The content to show in the toast and an optional `options` object to
override the options for this specific toast.
- `content` - The content to show in the toast. This can be anything that React can render as `children`.
- `options` _(optional)_ - An object of options to override the default options. See `defaultOptions` for more
information.
```js
show(<>Button clicked!>)
show(Button clicked!)
```
### `defaultOptions`
An object of default options. These options can be overridden by passing an `options` object to the
`ToastContextProvider`.
- `duration` - The duration in milliseconds to show the toast. Defaults to `3000`.
- `ref` - A ref to the toast element. Defaults to `null`. In case a `ref` is provided, React's `createPortal` will be
used to render the toast. If no `ref` is provided, the toast will be rendered in the `ToastContextProvider`.
- `Wrapper `- A wrapper component to wrap the toast in. Defaults to and "empty component":
`({ children }) => children`.
- `wrapperProps` - Props to pass to the wrapper component. Defaults to `{}`.
### `ToastContext`
This is the React context that is provided by the `ToastContextProvider`. You can use this context to create your own.
## Styling
This library does not provide any styling. You can style your toast by creating your own Toast component, and/or by
styling your Wrapper element.
## Advanced example
```javascript
import { ToastContextProvider, defaultOptions } from 'buttered-toast'
const App = ({ children }) => (
(
{title}
{children}
),
wrapperProps: { title: 'System notification' }
}}
>
{children}
)
```
```javascript
import { useToast } from 'buttered-toast'
const Component = () => {
const { show } = useToast()
return (
show(Button clicked!, {
duration: 10000,
wrapperProps: { title: 'What just happened?' }
})
}
>
Click me!
)
}
```