react-notification
Advanced tools
Comparing version 6.8.2 to 6.8.3
@@ -1,2 +0,2 @@ | ||
### Props | ||
## Props | ||
@@ -7,14 +7,14 @@ ### For single notification component | ||
|-----------------|-------------------------|-------------------------------------------------------------|-----------|----------------------------| | ||
| action | string | The name of the action, e.g., "close" or "undo" | | | | ||
| actionStyle | object | Custom action styles | | | | ||
| activeBarStyle | object | Custom snackbar styles when the bar is active | | | | ||
| activeClassName | string | Custom class to apply to the top-level component when active| | `'notification-bar-active'`| | ||
| barStyle | object | Custom snackbar styles | | | | ||
| className | string | Custom class to apply to the top-level component | | | | ||
| dismissAfter | number or boolean | Timeout for onDismiss event | | `2000` | | ||
| isActive | boolean | If true, the notification is visible | true | `false` | | ||
| message | string or React element | The message or component for the notification | true | | | ||
| style | boolean | Setting this prop to `false` will disable all inline styles | | | | ||
| title | string | The title for the notification | | | | ||
| action | string | The name of the action, e.g., "close" or "undo" | | | | ||
| style | boolean | Setting this prop to `false` will disable all inline styles | | | | ||
| barStyle | object | Custom snackbar styles | | | | ||
| activeBarStyle | object | Custom snackbar styles when the bar is active | | | | ||
| actionStyle | object | Custom action styles | | | | ||
| titleStyle | object | Custom title styles | | | | ||
| className | string | Custom class to apply to the top-level component | | | | ||
| activeClassName | string | Custom class to apply to the top-level component when active| | `'notification-bar-active'`| | ||
| dismissAfter | number or false | Timeout for onDismiss event | | `2000` | | ||
@@ -25,8 +25,8 @@ The `style` prop useful if you are not using React inline styles and would like to use CSS instead. See [styles](styles.md) for more. | ||
| Name | Type | Description | Required | Default | | ||
|-----------------------|-------|----------------------------------------------------------|---------- |----------| | ||
| notifications | array | Array of notifications to render | true | | | ||
| dismissInOrder | bool | If false, notification dismiss timers start immediately | false | true | | ||
| barStyleFactory | func | create the style of the notification | false | fn | | ||
| activeBarStyleFactory | func | create the style of the active notification | false | fn | | ||
| actionStyleFactory | func | create the style of the actions | false | fn | | ||
| Name | Type | Description | Required | Default | | ||
|-----------------------|---------|----------------------------------------------------------|-----------|----------| | ||
| actionStyleFactory | func | Create the style of the actions | false | fn | | ||
| activeBarStyleFactory | func | Create the style of the active notification | false | fn | | ||
| barStyleFactory | func | Create the style of the notification | false | fn | | ||
| dismissInOrder | boolean | If false, notification dismiss timers start immediately | false | true | | ||
| notifications | array | Array of notifications to render | true | | |
## Styles | ||
This component uses basic inline CSS to style the position and visibility of the notification.I would suggest reading the usage guidelines for [snackbars](http://www.google.com/design/spec/components/snackbars-toasts.html) before making any changes. | ||
This component uses basic inline styles to style the position and visibility of the notification. I would suggest reading the usage guidelines for [snackbars](http://www.google.com/design/spec/components/snackbars-toasts.html) before making any changes. | ||
@@ -38,3 +38,3 @@ You have two options for adding additional styles: | ||
stack. The default function adds the `bottom` style property to correctly | ||
position of the notification in a stack. | ||
position the notification in a stack. | ||
@@ -41,0 +41,0 @@ ```js |
## Introduction | ||
First, install the component via npm: `npm install react-notification`. | ||
Note the component uses `Object.assign`. If you are compiling with Babel, you should include the Babel Polyfill in your build to ensure the method works. | ||
### For single notification component | ||
@@ -65,8 +61,1 @@ | ||
``` | ||
## Sponsor | ||
**Individual**: If you like this code and you're interested in buying me a drink, I have a [Gratipay](https://gratipay.com/~pburtchaell/) (recurring) or [Venmo](https://venmo.com/pburtchaell) (one time). I greatly appreciate your support and I'm grateful to be a part of the open source and GitHub communities. | ||
**Company**: To help cover the cost of my time spent maintaining open source software projects, I'm looking for a small sponsor. If your company is interested, [email me](mailto:patrick@pburtchaell.com) and we can chat! | ||
@@ -7,3 +7,13 @@ import { Component, ReactElement } from 'react'; | ||
interface NotificationProps { | ||
interface OnClickNotificationProps { | ||
/** | ||
* Callback function to run when the action is clicked. | ||
* @param notification Notification currently being clicked | ||
* @param deactivate Function that can be called to set the notification to inactive. | ||
* Used to activate notification exit animation on click. | ||
*/ | ||
onClick?(notification: NotificationProps, deactivate: () => void): void; | ||
} | ||
interface NotificationProps extends OnClickNotificationProps { | ||
/** The name of the action, e.g., "close" or "undo". */ | ||
@@ -42,10 +52,4 @@ action?: string; | ||
titleStyle?: object; | ||
/** | ||
* Callback function to run when the action is clicked. | ||
* @param notification Notification currently being clicked | ||
* @param deactivate Function that can be called to set the notification to inactive. | ||
* Used to activate notification exit animation on click. | ||
*/ | ||
onClick?(notification: NotificationProps, deactivate: () => void): void; | ||
/** | ||
* Callback function to run when dismissAfter timer runs out | ||
@@ -57,3 +61,3 @@ * @param notification Notification currently being dismissed. | ||
interface NotificationStackProps { | ||
interface NotificationStackProps extends OnClickNotificationProps { | ||
/** Create the style of the actions. */ | ||
@@ -60,0 +64,0 @@ actionStyleFactory?: StyleFactoryFn; |
{ | ||
"name": "react-notification", | ||
"version": "6.8.2", | ||
"version": "6.8.3", | ||
"description": "Snackbar style notification component for React", | ||
@@ -14,2 +14,4 @@ "main": "dist/index.js", | ||
"lint": "node_modules/.bin/eslint src/**/*.js test/**/*.js", | ||
"postinstall": "npm run generate-lockfile", | ||
"generate-lockfile": "rm -rf package-lock.json && `npm bin`/synp --source-file ./yarn.lock", | ||
"start": "node examples/server.js" | ||
@@ -83,4 +85,5 @@ }, | ||
"dependencies": { | ||
"prop-types": "^15.5.10" | ||
"prop-types": "^15.5.10", | ||
"synp": "^1.2.1" | ||
} | ||
} |
# React Notification | ||
[![Build Status](https://travis-ci.org/pburtchaell/react-notification.svg)](https://travis-ci.org/pburtchaell/react-notification) [![npm downloads](https://img.shields.io/npm/dm/react-notification.svg?style=flat)](http://badge.fury.io/js/react-notification) | ||
[![npm version](https://badge.fury.io/js/react-notification.svg)](http://badge.fury.io/js/react-notification) [![Build Status](https://travis-ci.org/pburtchaell/react-notification.svg)](https://travis-ci.org/pburtchaell/react-notification) [![npm downloads](https://img.shields.io/npm/dm/react-notification.svg?style=flat)](http://badge.fury.io/js/react-notification) | ||
React Notification provides snackbar notification messages and notification stacks. The default visual style and interaction follows [Material Design guidelines for snackbars](http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-usage) and can be fully customized. | ||
![](https://raw.githubusercontent.com/pburtchaell/react-notification/master/docs/example-b.gif) | ||
React Notification is a component designed to provide snackbar notification messages and notification stacks. The default visual style and interaction follows [Material Design guidelines for snackbars](http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-usage), but it can be fully customized. | ||
## Docs and Help | ||
## Documentation and Help | ||
- [Guides](/docs/guides/) | ||
- [Introduction](/docs/introduction.md) | ||
- [Examples](/examples) | ||
## Releases | ||
- [Releases](https://github.com/pburtchaell/react-notification/releases) | ||
- [Upgrading versions](/UPGRADING.md) | ||
--- | ||
Copyright (c) 2015 Patrick Burtchaell. [Licensed with The MIT License (MIT)](https://raw.githubusercontent.com/pburtchaell/react-notification/master/LICENSE). [Gratipay](https://gratipay.com/~pburtchaell/). | ||
## Maintainers | ||
- [Patrick Burtchaell](http://github.com/pburtchaell) | ||
- [Berkeley Martinez](https://github.com/BerkeleyTrue) | ||
- [Joey Figaro](https://github.com/joeyfigaro) | ||
## License | ||
Copyright (c) 2015-2018 Patrick Burtchaell. | ||
[Licensed with The MIT License (MIT)](https://raw.githubusercontent.com/pburtchaell/react-notification/master/LICENSE). |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Install scripts
Supply chain riskInstall scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
27
1265
24
0
234043
3
1
1
+ Addedsynp@^1.2.1
+ Added@yarnpkg/lockfile@1.1.0(transitive)
+ Addedarr-union@3.1.0(transitive)
+ Addedbash-glob@2.0.0(transitive)
+ Addedbash-path@1.0.3(transitive)
+ Addedcolors@1.4.0(transitive)
+ Addedcommander@2.20.37.2.0(transitive)
+ Addedcomponent-emitter@1.3.1(transitive)
+ Addedcross-spawn@5.1.0(transitive)
+ Addedeach-parallel-async@1.0.0(transitive)
+ Addedeol@0.9.1(transitive)
+ Addedextend-shallow@2.0.1(transitive)
+ Addedis-extendable@0.1.1(transitive)
+ Addedis-extglob@2.1.1(transitive)
+ Addedis-glob@4.0.3(transitive)
+ Addedis-windows@1.0.2(transitive)
+ Addedisexe@2.0.0(transitive)
+ Addedlodash@4.17.21(transitive)
+ Addedlru-cache@4.1.5(transitive)
+ Addednmtree@1.0.6(transitive)
+ Addedpseudomap@1.0.2(transitive)
+ Addedsemver@7.6.3(transitive)
+ Addedshebang-command@1.2.0(transitive)
+ Addedshebang-regex@1.0.0(transitive)
+ Addedsort-object-keys@1.1.3(transitive)
+ Addedsynp@1.9.13(transitive)
+ Addedwhich@1.3.1(transitive)
+ Addedyallist@2.1.2(transitive)