https://github.com/vipcxj/react-nice-bubble

A customizable bubble for react which support transparent background and border
https://github.com/vipcxj/react-nice-bubble

Last synced: 5 days ago
JSON representation

A customizable bubble for react which support transparent background and border

• Host: GitHub
• URL: https://github.com/vipcxj/react-nice-bubble
• Owner: vipcxj
• License: mit
• Created: 2019-09-11T18:24:31.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T09:58:33.000Z (almost 3 years ago)
• Last Synced: 2025-09-14T14:56:36.085Z (29 days ago)
• Language: TypeScript
• Size: 2.15 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-nice-bubble · ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg) [![npm version](https://img.shields.io/npm/v/react-nice-bubble.svg?style=flat)](https://www.npmjs.com/package/react-nice-bubble)

The powerful bubble component for [React](https://reactjs.org/) which support transparent background and border.

# key features

- support background color with alpha.

- support border color with alpha.

- support custom border width.

- support custom border radius.

- support custom border color.

- support custom background color.

- support custom bubble width.

- support custom bubble height.

- support 12 arrow position.

- support custom arrow shape.

- support box-sizing.

## Installation

Using [npm](https://www.npmjs.com/):

    $ npm install --save react-nice-bubble

    

## Demo

[storybook](https://vipcxj.github.io/react-nice-bubble/)

## Example

    

```jsx

import React from 'react';

import Bubble, { BoxSizing, Position } from 'react-nice-bubble';

const App = (

  

     Hello world!

  

);

const root = document.getElementById('root');

ReactDOM.render(, root);

```

## Props

WIP