0.2.4 • Published 3 years ago
toastique-toast v0.2.4
toastique-toast
You can try the demo here.
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' |