├── .babelrc ├── webpack.config.js ├── package.json ├── index.js ├── README.md ├── .npmignore └── .gitignore /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "react", 4 | "es2015" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | vendor: ['react'], 6 | demo: './demo/show.js', 7 | app: './index.js', 8 | }, 9 | output: { 10 | path: __dirname, 11 | filename: './demo/[name].js', 12 | publicPath: '/', 13 | }, 14 | plugins: [ 15 | new webpack.NoEmitOnErrorsPlugin(), 16 | new webpack.LoaderOptionsPlugin({ debug: false, minimize: true }), 17 | new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), 18 | new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), 19 | 20 | ], 21 | module: { 22 | rules: [{ 23 | test: /\.js?$/, 24 | exclude: /node_modules/, 25 | use: ['babel-loader'], 26 | }] 27 | }, 28 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-notify", 3 | "version": "3.0.0", 4 | "description": "Tiny React's module that shows notifications.", 5 | "main": "app.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "babel-core": "^6.24.1", 9 | "babel-loader": "^7.0.0", 10 | "babel-preset-es2015": "^6.24.1", 11 | "babel-preset-react": "^6.24.1", 12 | "react": "^15.4.2", 13 | "webpack": "^2.5.1" 14 | }, 15 | "scripts": { 16 | "test": "echo \"Error: no test specified\" && exit 1" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/k4wo/ReactNotify.git" 21 | }, 22 | "keywords": [ 23 | "react", 24 | "notification", 25 | "notifier", 26 | "notify" 27 | ], 28 | "author": "k4wo ", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/k4wo/ReactNotify/issues" 32 | }, 33 | "homepage": "https://github.com/k4wo/ReactNotify" 34 | } 35 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | export default class Notify extends Component { 4 | 5 | constructor() { 6 | super(); 7 | this.wasMounted = true; 8 | this.key = 0; 9 | this.state = {}; 10 | } 11 | 12 | componentWillUnmount() { 13 | this.wasMounted = false; 14 | } 15 | 16 | success(title, msg, time) { 17 | this.addNotify(title, msg, time, 'success'); 18 | } 19 | 20 | error(title, msg, time) { 21 | this.addNotify(title, msg, time, 'error'); 22 | } 23 | 24 | info(title, msg, time) { 25 | this.addNotify(title, msg, time, 'info'); 26 | } 27 | 28 | addNotify(title, msg, time, theme) { 29 | const key = this.key++; 30 | const state = Object.assign(this.state, { [key]: { title, msg, time, theme } }); 31 | 32 | this.setState(state, () => this.countToHide(time, key)); 33 | } 34 | 35 | countToHide(duration, key) { 36 | setTimeout(() => { 37 | this.hideNotification(key); 38 | }, duration); 39 | } 40 | 41 | hideNotification(key) { 42 | if( !this.wasMounted ) { 43 | return; 44 | } 45 | 46 | this.setState((state) => { 47 | delete state[key]; 48 | return state; 49 | }); 50 | } 51 | 52 | item(key) { 53 | const { theme, title, msg } = this.state[key]; 54 | 55 | return ( 56 |
this.hideNotification(key)}> 57 |

{title}

58 |

{msg}

59 |
60 | ); 61 | } 62 | 63 | render() { 64 | const { state } = this; 65 | const keys = Object.keys(state); 66 | const el = keys.map((key) => this.item(key)); 67 | 68 | return
{el}
; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ReactNotify 2 | 3 | ## ** [You can see demo here](http://k4wo.github.io/react-notify/public/) ** 4 | 5 | Module of React that shows notifications / warnings. Just pass three arguments and it's all. 6 | * Title 7 | * Message (body) 8 | * Duration (in ms) 9 | 10 | You can use three type of notification - *success*, *info*, *error*. You can set different appearance to each notification by css. 11 | 12 | ```javascript 13 | var React = require('react'); 14 | var ReactNotify = require('react-notify'); 15 | 16 | React.createClass({ 17 | 18 | showNotification: function() { 19 | //this.refs.notificator.error("Title.", "Msg - body.", duration); 20 | //this.refs.notificator.info("Title.", "Msg - body.", duration); 21 | this.refs.notificator.success("Title.", "Msg - body.", 4000); 22 | }, 23 | 24 | render: function() { 25 | return ( 26 |
27 | 28 |
29 | ); 30 | } 31 | }); 32 | ``` 33 | # css 34 | 35 | You can set appearance by css. For example it may looks like this. 36 | ```css 37 | .notify-container { 38 | display: flex; 39 | flex-direction: column; 40 | flex-wrap: wrap; 41 | justify-content: flex-end; 42 | align-items: flex-start; 43 | align-content: flex-start; 44 | position: absolute; 45 | top: 0; 46 | right: 0; 47 | } 48 | 49 | .notify-item { 50 | width: 250px; 51 | margin: 5px 10px; 52 | color: #FFF; 53 | border-radius: 5px; 54 | } 55 | 56 | .notify-item:hover { 57 | opacity: 0.8; 58 | box-shadow: 0 0 10px 0 rgb(15, 15, 15); 59 | } 60 | 61 | .notify-item > p { 62 | font-family: 'Lora', serif; 63 | margin: 10px; 64 | opacity: .8; 65 | } 66 | 67 | .notify-item.success { 68 | background-color: rgba(81, 163, 81, 0.4); 69 | } 70 | 71 | .notify-item.error { 72 | background-color: rgba(203, 100, 94, 0.8); 73 | } 74 | 75 | .notify-item.info { 76 | background-color: rgba(33, 150, 243, 0.8); 77 | } 78 | 79 | .notify-title { 80 | font-weight: 700; 81 | } 82 | ``` 83 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | demo/ 3 | webpack.config.js 4 | index.js 5 | 6 | ### Node template 7 | # Logs 8 | logs 9 | *.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (http://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Typescript v1 declaration files 46 | typings/ 47 | 48 | # Optional npm cache directory 49 | .npm 50 | 51 | # Optional eslint cache 52 | .eslintcache 53 | 54 | # Optional REPL history 55 | .node_repl_history 56 | 57 | # Output of 'npm pack' 58 | *.tgz 59 | 60 | # Yarn Integrity file 61 | .yarn-integrity 62 | 63 | # dotenv environment variables file 64 | .env 65 | 66 | ### VisualStudioCode template 67 | .vscode/* 68 | !.vscode/settings.json 69 | !.vscode/tasks.json 70 | !.vscode/launch.json 71 | !.vscode/extensions.json 72 | ### macOS template 73 | *.DS_Store 74 | .AppleDouble 75 | .LSOverride 76 | 77 | # Icon must end with two \r 78 | Icon 79 | 80 | 81 | # Thumbnails 82 | ._* 83 | 84 | # Files that might appear in the root of a volume 85 | .DocumentRevisions-V100 86 | .fseventsd 87 | .Spotlight-V100 88 | .TemporaryItems 89 | .Trashes 90 | .VolumeIcon.icns 91 | .com.apple.timemachine.donotpresent 92 | 93 | # Directories potentially created on remote AFP share 94 | .AppleDB 95 | .AppleDesktop 96 | Network Trash Folder 97 | Temporary Items 98 | .apdisk 99 | ### JetBrains template 100 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 101 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 102 | 103 | # Sensitive or high-churn files: 104 | .idea/**/dataSources/ 105 | .idea/**/dataSources.ids 106 | .idea/**/dataSources.xml 107 | .idea/**/dataSources.local.xml 108 | .idea/**/sqlDataSources.xml 109 | .idea/**/dynamic.xml 110 | .idea/**/uiDesigner.xml 111 | 112 | # Gradle: 113 | .idea/**/gradle.xml 114 | .idea/**/libraries 115 | 116 | # Mongo Explorer plugin: 117 | .idea/**/mongoSettings.xml 118 | 119 | ## File-based project format: 120 | *.iws 121 | 122 | ## Plugin-specific files: 123 | 124 | # IntelliJ 125 | /out/ 126 | 127 | # mpeltonen/sbt-idea plugin 128 | .idea_modules/ 129 | 130 | # JIRA plugin 131 | atlassian-ide-plugin.xml 132 | 133 | # Crashlytics plugin (for Android Studio and IntelliJ) 134 | com_crashlytics_export_strings.xml 135 | crashlytics.properties 136 | crashlytics-build.properties 137 | fabric.properties 138 | ### Windows template 139 | # Windows thumbnail cache files 140 | Thumbs.db 141 | ehthumbs.db 142 | ehthumbs_vista.db 143 | 144 | # Folder config file 145 | Desktop.ini 146 | 147 | # Recycle Bin used on file shares 148 | $RECYCLE.BIN/ 149 | 150 | # Windows Installer files 151 | *.cab 152 | *.msi 153 | *.msm 154 | *.msp 155 | 156 | # Windows shortcuts 157 | *.lnk 158 | 159 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | demo/ 3 | app.js 4 | 5 | ### Node template 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (http://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Typescript v1 declaration files 45 | typings/ 46 | 47 | # Optional npm cache directory 48 | .npm 49 | 50 | # Optional eslint cache 51 | .eslintcache 52 | 53 | # Optional REPL history 54 | .node_repl_history 55 | 56 | # Output of 'npm pack' 57 | *.tgz 58 | 59 | # Yarn Integrity file 60 | .yarn-integrity 61 | 62 | # dotenv environment variables file 63 | .env 64 | 65 | ### VisualStudioCode template 66 | .vscode/* 67 | !.vscode/settings.json 68 | !.vscode/tasks.json 69 | !.vscode/launch.json 70 | !.vscode/extensions.json 71 | ### macOS template 72 | *.DS_Store 73 | .AppleDouble 74 | .LSOverride 75 | 76 | # Icon must end with two \r 77 | Icon 78 | 79 | 80 | # Thumbnails 81 | ._* 82 | 83 | # Files that might appear in the root of a volume 84 | .DocumentRevisions-V100 85 | .fseventsd 86 | .Spotlight-V100 87 | .TemporaryItems 88 | .Trashes 89 | .VolumeIcon.icns 90 | .com.apple.timemachine.donotpresent 91 | 92 | # Directories potentially created on remote AFP share 93 | .AppleDB 94 | .AppleDesktop 95 | Network Trash Folder 96 | Temporary Items 97 | .apdisk 98 | ### JetBrains template 99 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 100 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 101 | 102 | # User-specific stuff: 103 | .idea/**/workspace.xml 104 | .idea/**/tasks.xml 105 | .idea/dictionaries 106 | 107 | # Sensitive or high-churn files: 108 | .idea/**/dataSources/ 109 | .idea/**/dataSources.ids 110 | .idea/**/dataSources.xml 111 | .idea/**/dataSources.local.xml 112 | .idea/**/sqlDataSources.xml 113 | .idea/**/dynamic.xml 114 | .idea/**/uiDesigner.xml 115 | 116 | # Gradle: 117 | .idea/**/gradle.xml 118 | .idea/**/libraries 119 | 120 | # Mongo Explorer plugin: 121 | .idea/**/mongoSettings.xml 122 | 123 | ## File-based project format: 124 | *.iws 125 | 126 | ## Plugin-specific files: 127 | 128 | # IntelliJ 129 | /out/ 130 | 131 | # mpeltonen/sbt-idea plugin 132 | .idea_modules/ 133 | 134 | # JIRA plugin 135 | atlassian-ide-plugin.xml 136 | 137 | # Crashlytics plugin (for Android Studio and IntelliJ) 138 | com_crashlytics_export_strings.xml 139 | crashlytics.properties 140 | crashlytics-build.properties 141 | fabric.properties 142 | ### Windows template 143 | # Windows thumbnail cache files 144 | Thumbs.db 145 | ehthumbs.db 146 | ehthumbs_vista.db 147 | 148 | # Folder config file 149 | Desktop.ini 150 | 151 | # Recycle Bin used on file shares 152 | $RECYCLE.BIN/ 153 | 154 | # Windows Installer files 155 | *.cab 156 | *.msi 157 | *.msm 158 | *.msp 159 | 160 | # Windows shortcuts 161 | *.lnk 162 | 163 | --------------------------------------------------------------------------------