Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/damikun/react-toast
Custom push notification (Toast) implementation under React + stayed by TailwindCSS.
https://github.com/damikun/react-toast
context-api-react notifications react react-notification react-push-notification react-toast react-toast-notifications tailwind-toast toast
Last synced: about 2 months ago
JSON representation
Custom push notification (Toast) implementation under React + stayed by TailwindCSS.
- Host: GitHub
- URL: https://github.com/damikun/react-toast
- Owner: damikun
- License: mit
- Created: 2020-12-03T21:13:08.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-07T19:00:40.000Z (almost 4 years ago)
- Last Synced: 2024-10-08T16:45:03.700Z (3 months ago)
- Topics: context-api-react, notifications, react, react-notification, react-push-notification, react-toast, react-toast-notifications, tailwind-toast, toast
- Language: TypeScript
- Homepage: https://damikun.github.io/React-Toast/
- Size: 2.5 MB
- Stars: 79
- Watchers: 3
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Toast Component
Online Demo
### Description
This is custom toast component implemented by react hooks + React Context API and stayled using tailwindCSS framework. Feel free to inspirate by implementation :) This is trim of my UI lib that i use for my projects.
This componnent allow to push notifications to user screen and auto remove it after set or default time..
Example implements this push-Events:
- Info
- Error
- Warning
- Success
- Custom body
#### Concepts
- Responsive
- Using Hooks and Context API
- Using Tailwind and Fontawesome
(All can be adjusted by endpoint user)
### Installation
(!!! Package is not available on npm !!!)
1. Clone the repo
```sh
git clone https://github.com/damikun/React-Toast.git
```
2. Restore packages
```
yarn install
```
3. Build and run demo
```
yarn run start
```
### Configuration API
Toast Provider
- Usually placed in Providers.tsx or on top of App.tsx
- Give you access to toast
- In this example toast are send from "HomePage"
```tsx
```
Use hook to access toast actions
```tsx
// Custom hook to access default context
const toast = useToast();
// OR
// Use of concrete conetxt
const toast = useContext(ToastContext);
```
Example:
```tsx
export default function HomePage() {
const toast = useToast();
return (
toast?.pushError("Oppps Error", 5000)}
>
Error
);
}
```
Various types to push
```tsx
toast?.pushError("Error messgae", 5000);
toast?.pushWarning("Warning message"); // Default timeValue
toast?.pushSuccess("Success message");
toast?.pushInfo("Info Message");
toast?.push("Message", "Info", 2000);
toast?.pushCustom(, 2000);
toast?.pushError("Error messgae", 5000, "truncate-2-lines");
```
Predefined types (can be extended)
```tsx
type TostMessageType = "Info" | "Success" | "Warning" | "Error";
```
Support message truncate trim
```tsx
type Truncate = "truncate-1-lines" | "truncate-2-lines" | "truncate-3-lines";
```
Pass any custom React.ReactNode component to body
```tsx
toast?.pushCustom(, 2000);
toast?.pushCustom(
My custom body, 2000);
```
Various toast position
```tsx
// ...
type Position "top_right" | "top_middle" | "top_left" | "bottom_right" | "bottom_middle" | "bottom_left"
```
### Other
For valid display check that your React _"root"_ is flexible and fulscreen to support all browsers behaviour...
```
// public/index.html
```
### Doc
You can read [setp-by-step](./Step-By-Step.md) tutorial if you wanna start from scratch. (Currently writting / Not finished).
## License
This project is licensed with the [MIT license](LICENSE).