https://github.com/ardeora/solid-toast
Customizable Toast Notifications for SolidJS
https://github.com/ardeora/solid-toast
notifications solid-js toast
Last synced: 5 months ago
JSON representation
Customizable Toast Notifications for SolidJS
- Host: GitHub
- URL: https://github.com/ardeora/solid-toast
- Owner: ardeora
- License: mit
- Created: 2022-05-19T17:34:18.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T03:38:09.000Z (about 1 year ago)
- Last Synced: 2024-11-24T08:05:07.458Z (5 months ago)
- Topics: notifications, solid-js, toast
- Language: TypeScript
- Homepage: https://www.solid-toast.com
- Size: 374 KB
- Stars: 832
- Watchers: 5
- Forks: 26
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Create beautiful, customizable toasts in SolidJS.
## Features
- **Easily Customizable**
- **Promise API**
- **Lightweight**
- **Accessible**
- **SSR Support**
## Installation
#### With yarn
```sh
yarn add solid-toast
```
#### With NPM
```sh
npm install solid-toast
```
## Getting Started
Add a Toaster to your component tree. This component will render all toasts. Now you can trigger `toast()` from anywhere!
```jsx
import toast, { Toaster } from 'solid-toast';
const notify = () => toast('Here is your toast.');
const App = () => {
return (
Make me a toast
);
};
```
## Documentation
### `toast()` Function
Call this function from anywhere to create a toast.
#### Available Options
You can provide `ToastOptions` as the second argument. They will overwrite all options received from the `` component.
```js
toast('This is a simple toast!', {
duration: 5000,
position: 'top-right',
// Add a delay before the toast is removed
// This can be used to time the toast exit animation
unmountDelay: 500,
// Styling - Supports CSS Objects, classes, and inline styles
// Will be applied to the toast container
style: {
'background-color': '#f00',
},
className: 'my-custom-class',
// Custom Icon - Supports text as well as JSX Elements
icon: '🍩',
// Set accent colors for default icons that ship with Solid Toast
iconTheme: {
primary: '#fff',
secondary: '#000',
},
// Aria Props - Supports all ARIA props
aria: {
role: 'status',
'aria-live': 'polite',
},
});
```
#### Creating Toasts
There are several options for creating toasts
##### Blank
```js
toast('This is a blank toast!');
```
Blank toasts do not come with a default icon. However, you can set a custom JSX Element/Text (Emoji) icon by placing it in the `icon` option.
##### Success
```js
toast.success('Successfully saved!');
```
Creates a notification with an animated checkmark. Color accents can be themed with the `iconTheme` option.
##### Error
```js
toast.error('Something went wrong!');
```
Creates a notification with an animated error icon. Color accents can be themed with the `iconTheme` option.
##### Loading
```js
toast.loading('Loading Photos...');
```
Shows a toast with a loading indicator icon. The content can later be updated with an error or success icon. See how to update the toast content [here](#updating-toasts).
##### Promise
The `promise()` function can be used to create a toast from a promise. This function will automatically show a loading icon and update the toast with the result of the promise.
```jsx
const myPromise = fetchData();
toast.promise(myPromise, {
loading: 'Loading',
success: Got the data,
error: 'An error occurred 😔',
});
```
##### Custom Toast
You also have the ability to completely customize the appearance of your toast.
A custom JSX Element can be passed in like so:
```jsx
toast.custom(() => (
Custom Toast
This is a custom toast!
));
```
###### Advanced Option
You can also hook into the toast life-cycle by adding a parameter to the JSX Function call like so:
```jsx
toast.custom(
(t) => (
Custom Toast
This is a custom toast!
{t.visible ? 'Showing' : 'I will close in 1 second'}
toast.dismiss(t.id)}>Close Toast
;
),
{
unmountDelay: 1000,
}
);
```
#### Helpful Utilities
##### Dismiss Toasts Programatically
You can manually dismiss a notification with `toast.dismiss`. Beware that it triggers the exit animation and does not remove the Toast instantly. Toasts will auto-remove after 500ms by default. You can adjust the dismiss duration with the `unmountDelay` option.
###### Dismiss Single Toast
```js
const toastId = toast.loading('Loading...');
// ...
toast.dismiss(toastId);
```
Dismiss all toasts by omitting all arguments.
###### Dismiss All Toasts
```js
toast.dismiss();
```
##### Remove Toasts Instantly
Toasts can be removed instantly with toast.remove. This will not trigger the exit animation and remove the toast instantly.
```js
toast.remove(toastId);
// or
toast.remove();
```
##### Updating Toasts
Each toast call returns a unique id. Use this `id` in the toast options to update an existing toast.
```js
const toastId = toast.loading('Loading...');
// ...
toast.success('This worked', {
id: toastId,
});
```
### `Toaster` Component
This component will render all toasts.
#### Available Options
```jsx
```
## Acknowledgements
This project is inspired by
- [React Hot Toast](https://github.com/timolins/react-hot-toast)