All Projects → vkbansal → React Notie

vkbansal / React Notie

Licence: mit
Simple notifications for react

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Notie

Notie
🔔 a clean and simple notification, input, and selection suite for javascript, with no dependencies
Stars: ✭ 6,170 (+22751.85%)
Mutual labels:  prompt, notifications, alert, notification
Razor.SweetAlert2
A Razor class library for interacting with SweetAlert2
Stars: ✭ 98 (+262.96%)
Mutual labels:  notifications, alert, prompt
Notiflix
Notiflix is a JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better.
Stars: ✭ 172 (+537.04%)
Mutual labels:  notifications, alert, notification
Alertifyjs
A javascript framework for developing pretty browser dialogs and notifications.
Stars: ✭ 1,922 (+7018.52%)
Mutual labels:  prompt, notifications, alert
Overhang.js
🔔 A jQuery plugin for notifications, prompts and confirmations.
Stars: ✭ 437 (+1518.52%)
Mutual labels:  prompt, notifications, alert
Sweetalert2
A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
Stars: ✭ 13,929 (+51488.89%)
Mutual labels:  prompt, notifications, alert
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (+137.04%)
Mutual labels:  notifications, notification
SpaceView
No description or website provided.
Stars: ✭ 58 (+114.81%)
Mutual labels:  notifications, alert
Ismessages
This is simple extension for presenting system-wide notifications from top/bottom of device screen.
Stars: ✭ 299 (+1007.41%)
Mutual labels:  notifications, alert
Notifications
🛎 Notifications Center engine like GitHub or other application for any Rails applications.
Stars: ✭ 359 (+1229.63%)
Mutual labels:  notifications, notification
mobile-message
基于移动端的弹窗组件,默认提供info、success、warning、error、alert、confirm、multiple、vertical、bottomSheet、prompt,可自定义弹窗。它可以包含任何Html内容可以自定义弹窗的样式,也可以加入自定以的弹窗动画。
Stars: ✭ 13 (-51.85%)
Mutual labels:  alert, prompt
Vuejs Dialog
A lightweight, promise based alert, prompt and confirm dialog
Stars: ✭ 327 (+1111.11%)
Mutual labels:  prompt, alert
Monitor Table Change With Sqltabledependency
Get SQL Server notification on record table change
Stars: ✭ 459 (+1600%)
Mutual labels:  notifications, notification
notifyme
react-notification-timeline is a react based component helps in managing the notification in time-based manner.
Stars: ✭ 94 (+248.15%)
Mutual labels:  notifications, notification
checkmk-telegram-notify
Get alerted by Check_MK via Telegram bash script
Stars: ✭ 28 (+3.7%)
Mutual labels:  notifications, alert
react-notify
Tiny React's module that shows notifications.
Stars: ✭ 55 (+103.7%)
Mutual labels:  notifications, notification
Fftoast
A very powerful iOS message notifications and AlertView extensions. It can be easily realized from the top of the screen, the bottom of the screen and the middle of the screen pops up a notification. You can easily customize the pop-up View.
Stars: ✭ 649 (+2303.7%)
Mutual labels:  alert, notification
React Toastify
React notification made easy 🚀 !
Stars: ✭ 8,113 (+29948.15%)
Mutual labels:  react-component, notification
Yii2 Slack Log
Pretty Slack log target for Yii 2
Stars: ✭ 24 (-11.11%)
Mutual labels:  notifications, notification
react-awesome-notifications
A beautiful fully customizable React + Redux notification system built with styled-components
Stars: ✭ 29 (+7.41%)
Mutual labels:  notifications, notification

NPM version Build Status Dependency Status Dev Dependency Status

NPM

React Notie

Simple notification for React.

Inspired from notie by @jaredreich

Table of Contents

Installation

Using npm

npm install --save react-notie

Using yarn

yarn add react-notie

Browser Support

  • Edge >= 12
  • FireFox >= 38
  • Chrome >= 47
  • Opera >= 34
  • Safari >= 9

Note: For other browsers like Safari < 9 and IE 11, you need to polyfill Object.assign and Promise.

Usage

  1. Render root of your app within <NotieProvider />.
  2. use withNotie decorator/hoc with the component where you want to notie.
  3. include react-notie/css/notie.css.
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { NotieProvider } from 'react-notie';

const App = (
    <NotieProvider>
        <MyApp/>
    </NotieProvider>
)

ReactDOM.render(App, document.getElementById('root'));

// MyComponent.js
import React, { Component } from 'react';
import { withNotie } from 'react-notie';

class MyComponent extends Component {
    someAsyncAction = () => {
        fetch('/do-something').then(() => {
            this.props.notie.success('Thing Done!')
        });
    }

    render() {
        return (
            ......
        )
    }
}

export default withNotie(MyComponent);

API

API docs

Contributors

All Contributors

Changelog

For Changelog, see releases

License

MIT. Copyright(c) Vivek Kumar Bansal

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].