myt-react-notify
This react notification library is a gold. It is easy to use and undestand because it is uniquely engineered and it don`t need a complicated set-up for container and trigger like the majority does. This library set-up feels normal component and handy to understand which makes it unique, it can be render in any functions as component which allow developer to use customize component as templates. and plus it is just 6kb gzip minified, it is so light it can make the tree shaking and feather flying with no regrets.
installation
npm
npm i myt-react-notify
yarn
yarn add myt-react-notify
How to use
import to your project
;
Normal Usage
Notification has a default template stylesheet that can be use/imported when using template option, if not using template and use your own template don`t import it.
<button className="btn" onClick= { ; }>Show Notification</button>
Customize Template Usage
You can make template of your own.
;
<Button onClick= { ; }> Show Alert</Button>
Animation Usage
You can use a custom animation class using @keyframe for this component.
animate.css for cool animations.
<button className='btn' onClick= { ; }> Show Animated Notification</button>
Remaining Notification Usage
You can remove the timeout of the notification by setting delay
as 0
.
<button className='btn' onClick= { ; }> Show No Timeout Notification</button>
Customize Default Template Usage
You can customize the default template as well.
<button className='btn' onClick= { ; }> Customize Default Template</button>
Updating Notification Usage
You can update or change notification anytime and anywhere using id
which must be unique. but cannot be updated the Notification property timing
, placement
and delay
.
<button className='btn' onClick= { ; }> Updating Notification</button>
Cancel Notification Usage
You can close or cancel immidiately notification by updating the identified notification cancel
as true
.
<button className="btn" onClick= { ;}>Persistent Notification</button><button className="btn" onClick= { ;}>Cancel</button>
RenderHasId Usage
You can check the identified notification if it is already rendered.
<button className='btn' onClick= { ; }> Click Again If Rendered</button>
PROPERTIES
All properties that is supported by Notification Component.
The datatypes with "*" means it is required.
PROPERTY | DATATYPES | DEFAULT | DESCRIPTION |
---|---|---|---|
id | string | It is to identify the notification you want to update and cancel | |
template | { title: string, message: string, variant: "success" |"primary" |"warning" |"danger", dismissible: boolean } |
It is the properties of default template. if using default templating you must import the stylesheet import "myt-react-notify/template.css" . default { title: null, message: "", variant: "default", dismissible: true } |
|
animation | object | you can set a customize animations. default { enter: "fade-notify-in", exit: "fade-notify-out" } |
|
timing | number | 1000 | It is the duration of each animation |
delay | number | 5000 | It is the duration of notification will last. if the delay is set 0 it will remain forever unless dismiss |
placement | top-left|top-right|bottom-left|bottom-right | bottom-right | the placement where the notification will remain |
children | function | It enables you to make a customize template | |
cancel | boolean | false | It is to cancel or close the certain identified or with id notification |
onEnter | function | it is invoke when the animation is started to enter | |
onEntering | function | it is invoke when the animation is entering | |
onEntered | function | it is invoke when the animation is fully entered | |
onExit | function | it is invoke when the animation is started to exit | |
onExiting | function | it is invoke when the animation is exiting | |
onExited | function | it is invoke when the animation is fully exited | |
onMounted | function | it is invoke when the component is mounted |
Specials
you can remove notification in mobile using swipe from left to right.
License
MIT Licensed. Copyright (c) Mytabworks 2020.