https://github.com/trendmicro-frontend/react-notifications

React Notifications component
https://github.com/trendmicro-frontend/react-notifications

Last synced: 3 months ago
JSON representation

React Notifications component

• Host: GitHub
• URL: https://github.com/trendmicro-frontend/react-notifications
• Owner: trendmicro-frontend
• License: mit
• Created: 2017-06-19T16:28:42.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-09-22T14:07:07.000Z (about 1 year ago)
• Last Synced: 2024-07-18T23:02:04.829Z (4 months ago)
• Language: JavaScript
• Homepage: https://trendmicro-frontend.github.io/react-notifications
• Size: 2.36 MB
• Stars: 7
• Watchers: 17
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - react-notifications - React Notifications component ([demo](https://trendmicro-frontend.github.io/react-notifications/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-notifications - React Notifications component ([demo](https://trendmicro-frontend.github.io/react-notifications/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-notifications - React Notifications component ([demo](https://trendmicro-frontend.github.io/react-notifications/)). (Trend Micro / React Components)

README

        
# react-notifications [![build status](https://travis-ci.org/trendmicro-frontend/react-notifications.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-notifications) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-notifications/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-notifications?branch=master)

[![NPM](https://nodei.co/npm/@trendmicro/react-notifications.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-notifications/)

React Notifications

Demo: https://trendmicro-frontend.github.io/react-notifications

## Installation

1. Install the latest version of [react](https://github.com/facebook/react) and [react-notifications](https://github.com/trendmicro-frontend/react-notifications):

  ```

  npm install --save react @trendmicro/react-notifications

  ```

2. At this point you can import `@trendmicro/react-notifications` and its styles in your application as follows:

  ```js

  import { Notification, ToastNotification } from '@trendmicro/react-notifications';

  // Be sure to include styles at some point, probably during your bootstraping

  import '@trendmicro/react-notifications/dist/react-notifications.css';

  ```

## Usage

### Notification

#### Controlled Notification

```js

const { dismissed } = this.state;

 {

        this.setState({ dismissed: true });

    }}

/>

```

#### Uncontrolled Notification

Note: Always pass a new key while re-rendering uncontrolled notifications.

```js

 { // Optional

        // Generate a new key if the notification is dismissed.

    }}

/>

```

### Toast Notification

#### Controlled Toast Notification

```js

const { dismissed } = this.state;

 {

        this.setState({ dismissed: true });

    }}

/>

```

#### Uncontrolled Toast Notification

Note: Always pass a new key while re-rendering uncontrolled toast notifications.

```js

 { // Optional

        // Generate a new key if the toast notification is dismissed.

    }}

/>

```

## API

### Properties

Name        | Type     | Default | Description 

:---------- | :--------| :------ | :----------

type        | String   | ''      | One of: 'error', 'warning', 'info', 'success'

show        | Boolean  | true    | Whether or not the component is visible.

dismissible | Boolean  | true    | Whether or not the notification is dismissible.

autoDismiss | Number or Boolean  | false | The auto dismiss timeout in milliseconds.

onDismiss   | Function |         | A callback fired when the dismiss icon (x) is clicked.

## License

MIT