react-notification-badge
Simple notification badge react component
Demo
View Demo
Installation
npm install --save react-notification-badge
API
NotificationBadge
Props
NotificationBadge.propTypes = {
count: React.PropTypes.number,
label: React.PropTypes.string,
containerStyle: React.PropTypes.object,
style: React.PropTypes.object,
className: React.PropTypes.string,
effect: React.PropTypes.array,
duration: React.PropTypes.number
};
-
count
: Badge count, if count < 1
, badge will not shown.
-
label
: Badge label will be rendered instead of count.
-
containerStyle
: custom style of container
-
style
: custom style of badge
-
className
: className of badge
-
effect
: effect of notification.
effect array should be [string, string, object, object]
.
effect[0]
will be applied to transform
on first frame.
effect[1]
will be applied to transform
on frameLength
.
effect[2]
will be applied as style[key] = value
on first frame.
effect[3]
will be applied to style[key] = value
on frameLength
.
Pre defined effect is available as
Effect.ROTATE_X
Effect.ROTATE_Y
Effect.SCALE
-
frameLength
: Frame length for effect[1]
and effect[3]
(default 30.0, 60.0fps/30.0 = 0.5 second)
Usage example
import NotificationBadge from 'react-notification-badge';
import {Effect} from 'react-notification-badge';
<div style={container}>
<NotificationBadge count={this.state.count} effect={Effect.SCALE}/>
</div>
See example
npm install
npm run start:example
Tests
npm test
Update dependencies
Use npm-check-updates