A simple and customizable bubble for react
The bubble points to its parent :
const Demo = () => (
<span>
Text to bubble
<Bubble width={250} height={80}>
Content Test
</Bubble>
</span>
);
ReactDOM.render(<Demo />, mountNode);
npm install --save react-bubble
If you customize the arrow style, I strongly recommend you to override the delta rendering with customArrowRenderWithDelta since Bubble won't know the logic of the transformation.
{
container: {
position: 'fixed',
backgroundColor: 'rgb(238, 238, 238)',
minHeight: 70,
display: 'flex',
boxShadow: 'rgba(0, 0, 0, 0.2) 2px 0px 10px 2px',
borderRadius: 2,
},
arrow: {
left: {
right: '100%',
top: 5,
borderTopWidth: 0,
borderTopColor: 'transparent',
borderRightWidth: 10,
borderRightColor: 'rgb(32,166,181)',
borderBottomWidth: 10,
borderBottomColor: 'transparent',
borderLeftWidth: 0,
borderLeftColor: 'transparent',
},
right: {
left: '100%',
top: 5,
borderTopWidth: 10,
borderTopColor: 'rgb(32,166,181)',
borderRightWidth: 10,
borderRightColor: 'transparent',
borderBottomWidth: 0,
borderBottomColor: 'transparent',
borderLeftWidth: 0,
borderLeftColor: 'transparent',
},
},
bar: {
width: 10,
backgroundColor: 'rgb(32,166,181)',
position: 'relative',
},
}