https://github.com/polyconseil/react-bubble

A simple and customizable bubble for react
https://github.com/polyconseil/react-bubble

Last synced: 11 months ago
JSON representation

A simple and customizable bubble for react

• Host: GitHub
• URL: https://github.com/polyconseil/react-bubble
• Owner: Polyconseil
• Created: 2016-08-03T13:00:16.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2020-08-11T12:35:13.000Z (almost 6 years ago)
• Last Synced: 2025-06-28T18:09:04.439Z (12 months ago)
• Language: JavaScript
• Homepage: https://polyconseil.github.io/react-bubble/
• Size: 1.81 MB
• Stars: 9
• Watchers: 14
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-bubble

A simple and customizable bubble for react

## Example

![Example](https://github.com/Polyconseil/react-bubble/raw/master/examples/images/simple_example.png "Simple bubble")

The bubble points to its parent :

```playground_norender

const Demo = () => (

    

      Text to bubble

      

        Content Test

      

       

);

ReactDOM.render(, 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

```javascript

{

  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',

  },

}

```