- Dependency-free
- Non-blocking
- Tiny footprint (~2kb)
- Framework-agnostic (jQuery, Vue, React, etc.)
- Displays centered notifications
- Fully customizable CSS
- Fade-in/out animation by default
toast("Clicked 2 times")
Hide notification after 5 seconds.
toast("Copied", { hideAfter: 5000 })
- hideAfter - hidding the notification after this duration
- className - Notification Class name
- transitionClassName - Transition Class name. check Animation below
export const defaultOption = {
hideAfter: 2000, // in milliseconds
className: '',
transitionClassName: 'wy-toast', // transition class name
// style
backgroundColor: 'black',
borderRadius: '2px',
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
color: 'white',
padding: '4px 8px',
fontSize: '14px',
// container style
containerStyle: {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
pointerEvents: 'none',
zIndex: '999999',
},
};
By default, using css transition to do animation. It's the same logic that Vue 3 transition is using.
.wy-toast-active {
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
opacity: 1;
transform: translateY(0);
}
.wy-toast-from {
opacity: 0;
transform: translateY(+20px);
}
.wy-toast-to {
opacity: 0;
transform: translateY(-20px);
}If you want to customize animation, you can add your styles to overwrite the styles.
Or you can also provide a different transition className and add your own css styles. For example, with option transitionClassName: notify, you need to add 3 styles:
notify-activenotify-fromnotify-to
import { toast, defaultOption } from '@wontyouth/toast'
defaultOption.hideAfter = 5000
toast("Message Copied", { hideAfter: 2000})
<script src='https://cdn.jsdelivr.net/npm/@wongyouth/toast'></script>
<script>
Toast.option.hideAfter = 5000
Toast.toast('Toast')
</script>
If jQuery is available
$.toast.option.hideAfter = 5000
$.toast("Message Copied")
This script was created under the MIT License.