React component implementing a circular badge that can be attached to some corner of its container
MIT License
Simple circular badge that can be attached to some corner of its container.
const Badge = require('react-badger')
const App = () => (
<div style={{ background: '#f5f5f5', position: 'relative' }}>
<Badge />
</div>
)
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 the anchor
is set to inline
, 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
,
and bottomRight
. The default value is topRight
.
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 the background-color
property.
offset
: the offset of the badge from the corner where it is anchored to.
Ignored when the anchor is set to inline
. 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 badge
visible
: 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.