flash-notif
About @flash-notif/vue-component
flash-notif is a vue component that let's you show flash notifications (including vibration) across your entire app, depending on user processes, actions and even system processes.
You can pass neutral messages, warnings, notify of successful processes and failures .e.t.c
This version is dependent on and uses Vuex store. Hence, you need to have setup Vuex store in your Vue project (majority of people create their vue projects with vuex by default for state management).
Warning
Note: This is a Vue component plugin and should be used in Vue/Nuxt projects only. Also, make sure to have vuex enabled in your project.
Step 1: Installation
npm i flash-notif
Step 2: Setup and Import in your project
Add these lines to your main.js file
import flashNotif from 'flash-notif'
import '../node_modules/flash-notif/dist/flash-notif.css'
Vue.use(flashNotif, { store })
Step 3: Usage
Add the component anywhere in your App.vue template
<flash-Notif />
Step 4: How to show notification to user
Method 1:
When an event occurs and you want to show notification to the user, just use the following inside that event handler/method/fuction...
this.$store.dispatch('flashNotif', {
message: {
title: 'Your notification title',
text: 'Your notification text body'
},
type: 'notification type e.g. warning, error, success, neutral',
pos: 'notification position e.g. top, bottom',
duration: 'how long you want the notification to stay on the screen in milliseconds e.g 7000 for 7 seconds',
vibrate: true
})
Method 2:
import Vuex mapActions into the script that of any component you want to use flash-notif in.
import { mapActions } from 'vuex'
Then, add the following to your "methods" property
...mapActions(['flashNotif'])
When an event occurs and you want to show notification to the user, just use the following inside that event handler/method/fuction...
flashNotif({
message: {
title: 'Your notification title',
text: 'Your notification text body'
},
type: 'notification type e.g. warning, error, success, neutral',
pos: 'notification position e.g. top, bottom',
duration: 'how long you want the notification to stay on the screen in milliseconds e.g 7000 for 7 seconds',
vibrate: true
})
Customize configuration
type
Notification type can be warning, error, success, neutral. It is important to specify type. e.g
type: 'success'
pos
pos property defines where the notification should be displayed on the screen. You can pass either 'top' or 'bottom'. If nothing is passed, the notification automatically displaced at the top right. e.g
pos: 'bottom'
duration
The 'duration' property defines how long the notification stays on the screen before disappearing if the user doesnt manually close it. Its value is in millimeter e.g. to show notification for 5 seconds
duration: 5000
Note: It is ok to pass the value as string or integer, anyone works.
vibrate
In other to shift user attention to notifications when they pop up, the 'vibrate' property allows vibrates user device in a flash when they are on mobile.
This property can either take true or false as value depending if you want a notification to vibrate user's device or not. Notifications vibrate by default or when vibrate property is not defined.
vibrate: true
Note: It is ok to pass the value as string or integer, anyone works.
Examples
Success Notification:
if (appSuccess) {
flashNotif({
message: {
title: 'Application Successful',
text: 'Your application details has been sent to your mail. Please proceed from there.'
},
type: 'success',
pos: 'top',
duration: 7000,
vibrate: false
})
}
other example
Source Code
Visit Github Repo.
Feel free to star and follow.
Donate
Donate, become my patreon. Donate now.
Hire me
Crrenty available for Frontend roles. Hire Now.