react-bubble
A simple and customizable bubble for react
Example
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);
Installation
npm install --save react-bubble
Style
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.
Default style properties
container: position: 'fixed' top: 0 left: 0 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'