https://github.com/odudek/noti-react

Demo: https://odudek.github.io/noti-react/
https://github.com/odudek/noti-react

notification react react-component react-notification

Last synced: 3 months ago
JSON representation

Demo: https://odudek.github.io/noti-react/

• Host: GitHub
• URL: https://github.com/odudek/noti-react
• Owner: ODudek
• License: mit
• Created: 2018-09-20T14:21:16.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-01-08T13:42:12.000Z (over 1 year ago)
• Last Synced: 2025-03-18T10:18:43.548Z (4 months ago)
• Topics: notification, react, react-component, react-notification
• Language: JavaScript
• Homepage:
• Size: 2.35 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Noti-react

[![npm version](https://img.shields.io/npm/v/noti-react.svg?style=flat-square)](https://www.npmjs.com/package/noti-react)

[![Build Status](https://img.shields.io/travis/ODudek/noti-react/master.svg?style=flat-square)](https://travis-ci.org/ODudek/noti-react)

[![dependencies](https://david-dm.org/odudek/noti-react.svg?style=flat-square)](https://github.com/odudek/noti-react)

[![npm](https://img.shields.io/npm/dt/noti-react.svg?style=flat-square)](https://www.npmjs.com/package/noti-react)

[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/react.svg?style=flat-square)](https://github.com/ODudek/noti-react)

[![HitCount](http://hits.dwyl.io/odudek/noti-react.svg)](http://hits.dwyl.io/odudek/noti-react)

Simple notification component for React with support for Typescript!

![demo](./demo.jpg)

## Install

1. Use npm 

```bash

npm install noti-react

```

2. Use yarn

```bash

yarn add noti-react

```

## Notification

|property| propType|required|default|description|

|---|---|---|---|---|

|type|string ('error', 'info', 'success', 'warn')|- |'info'|Deside which type of notification do you want to use!|

|label|string|yes|-|Text which you want to display|

|autoHide|bool|-|true|Auto hide notification|

|animationTime|number|-|500|Time of animation duration in miliseconds|

|position|string ('top-left', 'top-right', 'bottom-left', 'bottom-right')|-|'bottom-right'| Position in which corner do you want to display notification|

|hideTime|number|-|5000|After this time notification will close if `autoHide` props is `true`|

|customColor|string (rgb string like '#000000') |-|-|Add your custom color|

|className|string|-|-|Customize style by adding custom class|

## Example

1. Import notification component

```javascript

import { Notification } from 'noti-react';

```

2. Use it in your component

```javascript

```

## Tests

Run tests

```bash

npm test

```