Skip to content
A simple and customizable bubble for react
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
docs_src/__docs__
examples/images
lib
.babelrc
.eslintrc
.gitignore
.npmignore
README.md
doks.config.js
package.json

README.md

react-bubble

A simple and customizable bubble for react

Example

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',
    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',
  },
}
You can’t perform that action at this time.