rc-notification

React Notification UI Component
!NPM versionnpm-imagenpm-url !build statusgithub-actions-imagegithub-actions-url !Test coveragecoveralls-imagecoveralls-url !npm downloaddownload-imagedownload-url !bundle sizebundlephobia-imagebundlephobia-url

Install

Usage

import Notification from 'rc-notification';

Notification.newInstance({}, notification => {
  notification.notice({
    content: 'content'
  });
});

Compatibility

|
IE / Edge |
Firefox |
Chrome |
Safari |
Electron | | --- | --- | --- | --- | --- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

Example

http://localhost:8001
online example: https://notification-react-component.vercel.app

API

Notification.newInstance(props, (notification) => void) => void

props details:

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>prefixCls</td>
      <td>String</td>
      <td></td>
      <td>prefix class name for notification container</td>
    </tr>
    <tr>
      <td>style</td>
      <td>Object</td>
      <td>{'top': 65, left: '50%'}</td>
      <td>additional style for notification container.</td>
    </tr>
    <tr>
      <td>getContainer</td>
      <td>getContainer(): HTMLElement</td>
      <td></td>
      <td>function returning html node which will act as notification container</td>
    </tr>
    <tr>
      <td>maxCount</td>
      <td>number</td>
      <td></td>
      <td>max notices show, drop first notice if exceed limit</td>
    </tr>
</tbody>

notification.notice(props)

props details:

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>content</td>
      <td>React.Element</td>
      <td></td>
      <td>content of notice</td>
    </tr>
    <tr>
      <td>key</td>
      <td>String</td>
      <td></td>
      <td>id of this notice</td>
    </tr>
    <tr>
      <td>closable</td>
      <td>Boolean</td>
      <td></td>
      <td>whether show close button</td>
    </tr>
    <tr>
      <td>onClose</td>
      <td>Function</td>
      <td></td>
      <td>called when notice close</td>
    </tr>
    <tr>
      <td>duration</td>
      <td>number</td>
      <td>1.5</td>
      <td>after duration of time, this notice will disappear.(seconds)</td>
    </tr>
    <tr>
      <td>style</td>
      <td>Object</td>
      <td> { right: '50%' } </td>
      <td>additional style for single notice node.</td>
    </tr>
    <tr>
      <td>closeIcon</td>
      <td>ReactNode</td>
      <td></td>
      <td>specific the close icon.</td>
    </tr>
    <tr>
      <td>props</td>
      <td>Object</td>
      <td></td>
      <td>An object that can contain <code>data-*</code>, <code>aria-*</code>, or <code>role</code> props, to be put on the notification <code>div</code>. This currently only allows <code>data-testid</code> instead of <code>data-*</code> in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960.</td>
    </tr>
</tbody>

notification.removeNotice(key:string)

remove single notice with specified key

notification.destroy()

destroy current notification

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-notification is released under the MIT license.