Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meetzaveri/react-toastbox
A minimal react toast box inspired by reddit's toast message design and react-toastify.
https://github.com/meetzaveri/react-toastbox
react-components reactjs toast toast-box
Last synced: about 1 month ago
JSON representation
A minimal react toast box inspired by reddit's toast message design and react-toastify.
- Host: GitHub
- URL: https://github.com/meetzaveri/react-toastbox
- Owner: meetzaveri
- Created: 2019-12-04T14:28:28.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T11:07:14.000Z (over 1 year ago)
- Last Synced: 2024-08-16T04:04:42.482Z (3 months ago)
- Topics: react-components, reactjs, toast, toast-box
- Language: JavaScript
- Size: 4.9 MB
- Stars: 2
- Watchers: 4
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-toastbox
A minimal react toast box inspired by reddit's toast message design and react-toastify.
## Installation
[](https://www.npmjs.com/package/react-toastbox)
Using npm:
```
npm install react-toastbox
```
## How to use
1. Import main `Toastbox` from lib and you need to inject it once in your main bootstrapped file.
`main.js`
```js
import ToastBox from "react-toastbox";
.
.
.
```
2. To use it in action, import `toast` method to call your toast message on screen.
`child.js`
```js
import { toast } from "react-toastbox";
.
.
.
handleClick = () => {
/* Then when you want to show toast, call method and pass argument as text to display*/
toast.success('Toast it up');
}
```
## Codesandbox demo
[Live Demo](https://codesandbox.io/s/epic-currying-62r0y)
## Screenshots
## API
### ``
#### Properties
name
required
type
default
description
timerExpires
no
Number
6000(in 'ms')
Expiration time till toast message should be visible
pauseOnHover
no
Boolean
true
On hovering toast, it's timer should be paused
position
no
String
'top-right'
Position for toast to be displayed.
intent
no
String
'primary'
Theme for toast message
### `toast`
#### Methods
`toast` is object containing methods for success and error(More to come soon).
- `toast.error('Error')` - Showing error toast message
- `toast.success('Success')` - Showing success toast message
## Possible values for API
```js
positionClasses = [
"top-right",
"top-left",
"top-center",
"bottom-right",
"bottom-left",
"bottom-center"
];
paints = ["success", "warning", "danger"];
```
## Quick API tour
In order to use toast box, you need to define component `` in root file which will listen for events(success,danger,etc), for example i.e. `App.js`.
Then when you want to show `error` or `success` message, just use `{toast}` method available from package. `toast.success('Yayy')`
### ToastBox
```js
import ToastBox from "react-toastbox";
.
.
.
```
### { toast }
```js
import { toast } from "react-toastbox";
.
.
.
handleClick = () => {
/* Then when you want to show toast, call method and pass argument as text to display*/
toast.success('Toast it up');
}
```
## Usage
- Use `` once in your app which listens to events such as success,error,etc...
So in your root component(mainly `App.js` or `main.js`), register this component with suitable props acc. to your needs
In Nutshell,
```js
import React from "react";
import ReactDOM from "react-dom";
import ToastBox, { toast } from "react-toastbox";
import "./styles.css";
function App() {
return (
{/* First define toastbox component which will listen to events*/}
{
/* Then when you want to show toast, call method and pass argument as text to display*/
toast.success("Toast it up");
}}
>
Show me toast
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```