https://github.com/owenmelbz/mlbz-nudge
🚨 Simple dependency free ES6 library to produce small on-screen nudges
https://github.com/owenmelbz/mlbz-nudge
es6 javascript notification nudge
Last synced: 3 months ago
JSON representation
🚨 Simple dependency free ES6 library to produce small on-screen nudges
- Host: GitHub
- URL: https://github.com/owenmelbz/mlbz-nudge
- Owner: OwenMelbz
- Created: 2018-05-12T08:26:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-12T08:37:52.000Z (about 8 years ago)
- Last Synced: 2025-10-06T07:55:13.861Z (8 months ago)
- Topics: es6, javascript, notification, nudge
- Language: JavaScript
- Size: 105 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mlbz-nudge
> Simple dependency free ES6 library to produce small on-screen nudges
**This is the successor of https://github.com/OwenMelbz/jquery-nudge**
This is a simple ES6 no strings attached, self contained, you get what you pay for micro library.
It simply allows you to display a small unobtrusive on screen prompt for a few moments.
Super helpful for things like
- Back up saved
- New friend request
- Gentle reminders
## Installation
You can install via npm or yarn
via npm using `npm install mlbz-nudge`
or via yarn using `yarn add mlbz-nudge`
# Usage
You will need to transpile this down for older browsers most likely, but once you've got that flow working simply use however you like e.g
```js
window.nudge = require('mlbz-nudge');
new nudge('this is globally accessible');
```
or even
```js
import nudge from 'mlbz-nudge'
new nudge('this is local to the file');
```
# Configuring
You can pass in either a single string param for a simple message, or you can pass in a configuration object, the default looks like
```js
{
message: 'This is a nudge', // the default message
wait: 3000, // how long to sit on the screen idle
delay: 100, // how long to wait before starting the incoming animation
kill: 4500, // how long before removing the element after its been hidden off screen
}
```
# Customising
The CSS for the component is scoped within the element itself, however you should be able to overwite using
```
.mlbz-nudge
.mlbz-nudge span
.mlbz-nudge.start
.mlbz-nudge.show
.mlbz-nudge.finish
```
Or you can pass in
```js
{
noCss: true
}
```
To disable the css completely.
# Upgrading from jquery-nudge
The javascript API is identical, however the css classes have been renamed from `.jquery-nudge` to `.mlbz-nudge` so update any references to the new class name