react-badger
v2.0.23
Published
Simple React notification badge component
Downloads
274
Readme
react-badger
Simple circular badge that can be attached to some corner of its container.
Usage
const Badge = require('react-badger')
const App = () => (
<div style={{ background: '#f5f5f5', position: 'relative' }}>
<Badge />
</div>
)
Props
The component supports the following props:
anchor
: defines the corner where the badge will be anchored to in its containing component. The containing component must have relative CSS positioning (i.e.position: relative
in CSS) for the badge to be positioned properly unless theanchor
is set toinline
, in which case the badge will appear in the document flow like any other block-inlined element. Currently supported values are:inline
,topLeft
,topRight
,bottomLeft
, andbottomRight
. The default value istopRight
.animated
: whether the badge should be animated when it appears or disappears.color
: specifies the color of the badge. You can use anything that is accepted in CSS for thebackground-color
property.offset
: the offset of the badge from the corner where it is anchored to. Ignored when the anchor is set toinline
. Must be an array of length 2, containing the horizontal and vertical offsets in CSS notation. (Pixel values can also be declared as numbers; percentages are allowed).shadow
: whether to put a drop shadow below the badgevisible
: whether the badge is visible.
Any additional props are spread to the root <div>
of the component.
Children are shown directly in the generated <div>
, making it possible
to use children for displaying labels in the badge.