Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-notification

Package Overview
Dependencies
Maintainers
2
Versions
56
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-notification - npm Package Compare versions

Comparing version 6.8.2 to 6.8.3

.gitbook.yml

32

docs/guides/props.md

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc