toastique-toast
0.2.4 • Public • Published
Installation
$ npm install --save toastique-toast
$ yarn add toastique-toast
The gist
import { toast, ToastList } from 'toastique-toast'
function App() {
const [toasts, setToasts] = useState([])
const handleShowToast = () => {
toast.addToast('success', {
heading: "Wow",
content: "I'm an success toast!",
position: "bottom-left"
})
setToasts(toast.getToasts())
}
return (
<div>
<button type='button' onClick={handleShowToast}>Show</button>
{toasts.length > 0 && <ToastList toast={toast} toastList={toasts}/>}
</div>
);
}
export default App;
}
options
Option |
Description |
default |
type |
acceptable values |
heading |
toast title |
- |
String |
- |
content |
toast text content |
- |
String |
- |
color |
toast color |
#9f86c0 (info) |
String |
- |
|
|
#fee440 (warning) |
|
|
|
|
#d62828 (error) |
|
|
|
|
#57cc99 (success) |
|
|
position |
toast position on the screen String |
'top-right' |
String |
'top-right' / bottom-right' / 'top-left' / 'bottom-left' |
autoCloseTime |
toast duration |
5000 |
Number |
- |
animation |
toast appearance |
'from bottom' |
String |
'from bottom' / from right side' |
'space between toasts' |
space beetween each toast |
'medium' |
String |
'small' / 'medium' / 'large' |
Package Sidebar
Install
Weekly Downloads