# noti

> Noti is a small js library that allows you to create simple ntoification on your website.

Latest version **1.0.0** (published 2015-11-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install noti
pnpm add noti
yarn add noti
bun add noti
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2015-11-29 |
| First published | 2015-11-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | Abdullahi Mahamed |
| Maintainers | abdi42 |
| Keywords | notification, js, javascript, web, css, alert, noti |

## Links

- npm: https://www.npmjs.com/package/noti
- Repository: https://github.com/abdi42/noti
- Issues: https://github.com/abdi42/noti/issues
- npm.io page: https://npm.io/package/noti

## Dependencies (1)

- [grunt](https://npm.io/package/grunt.md) ^0.4.5

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.0 (latest) — 2015-11-29

## README

# Introducing Noti

**Noti** is a small js library that allows you to create simple ntoification on your website. 


----------


## Setup up


### Install
You can install Noti using npm or fork this repo


### Usage 
To use noti you need to include it in your html


#### Example
```html
<body>
	<div>
	</div>
	<script type="text/javascript" src="build/noti.js"></script>
</body>
```


----------


## JS

#### Example
``` javascript
/*global noti*/
noti
    .init({
        containerId: "noti",
        notiElClass: "notification",
        tapToDismiss: true,
        messageClass: "notification-message",
        typesConfig: [{
            type: "success",
            className: "success"
        }, {
            type: "error",
            className: "error"
        }, {
            type: "warning",
            className: "warning"
        }, ]
    })
    .createNoti({
        message: "Successfully running notifiy",
        type: "success",
        showDuration: 7,
        sticky: true,
        onClick: function() {
            noti.createNoti({
                message: "Notification clicked",
                type: "success",
                showDuration: 2
            })
        }
    })
    .createNoti({
        message: "Warning about something",
        type: "warning",
        showDuration: 5,
        onShow: function() {
            console.log("Showed")
        }
    })
    .createNoti({
        message: "Error something is wrong",
        type: "error",
        showDuration: 7,
        onClick: function() {
            noti.createNoti({
                message: "Error dismissed",
                type: "warning",
                showDuration: 3
            })
        }
    })
```


----------


## Methods

### noti.init([Object])

**containerId : [String]**
	
When you call the createNoti method a new div element will be made inside your body tag. This is the container element id give it a name and use it in your css

**notiElClass :[String]**

This is the class name for the new noti div element that will be created inside the container element. 

**tapToDismiss:[Boolean]**

Allow you to set if you the notification is dismissable

**messageClass:[String]**
This is the class name for the new  div element that will be created inside the noti element that will contain the notification message. 

**typesConfig:[Array]**

This will contain an array containing objects that will specify the different types of notification and their class names.

#### Example

Here an example of calling the init method 
``` javascript
noti.init({
    containerId: "noti",
    notiElClass: "notification",
    tapToDismiss: true,
    messageClass: "notification-message",
    typesConfig: [{
        type: "success",
        className: "success"
    }, {
        type: "error",
        className: "error"
    }, {
        type: "warning",
        className: "warning"
    }, ]
})
```

Then in your css you would use those class and id names

``` css
#noti{
    position:absolute;
    margin-left:35px;
    margin-top:25px;
    display:block;
}

.notification{
    color:white;
    border-radius:15px;
    padding:15px;
    padding-right:10px;
    margin-bottom:15px;
    width:15em;
    word-wrap: break-word;
}

.error{
    background-color:rgb(231, 76, 60)
}
.success{
    background-color:rgb(46, 204, 113)
}
.warning{
    background-color:rgb(241, 196, 15)
}
.primary{
    background-color:rgb(52, 152, 219);
}
```


### noti.createNoti([Object])
  **message:[String]**
  Specify the message that the element will contain
  
  **type:[String]**
  The type of notification element you want to display
  > **Note**
  > you need to specify the types in when you call noti.init()
  > **Example of type config below**
``` javascript
noti.init({
        typesConfig: [{
            type: "success",
            className: "success"
        }, {
            type: "error",
            className: "error"
        }, {
            type: "warning",
            className: "warning"
        }, ]
    })
```

**showDuration:[int]**
The amount of time you want to show a specific element

**onClick:[function]**
function that is called when the element is clicked on

### Example

``` javascript
noti.createNoti({
    message: "Successfully running notifiy",
    type: "success",
    showDuration: 7,
    sticky: true,
    onClick: function() {
        noti.createNoti({
            message: "Notification clicked",
            type: "success",
            showDuration: 2
        })
    }
})
```

----------


## And thats it!! hope this was helpful

---
_Source: https://npm.io/package/noti · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._