Top

Demo

Code

Layout

Docs

Styles

React-Bubble-UI

A highly configurable Bubble UI React.js component, similar to the iconic Apple Watch app layout.

npm install react-bubble-ui

Download from

Contribute on

Say thanks with

Interactive Demo

3M Company

MMM

Abbott Laboratories

ABT

AbbVie Inc.

ABBV

ABIOMED Inc

ABMD

Accenture plc

ACN

Activision Blizzard

ATVI

Adobe Inc.

ADBE

Advanced Micro Devices Inc

AMD

Advance Auto Parts

AAP

AES Corp

AES

AFLAC Inc

AFL

Agilent Technologies Inc

Air Products & Chemicals Inc

APD

Akamai Technologies Inc

AKAM

Alaska Air Group Inc

ALK

Albemarle Corp

ALB

Alexion Pharmaceuticals

ALXN

Align Technology

ALGN

Allegion

ALLE

Alliant Energy Corp

LNT

Realtime Options

size:

180px

minSize:

20px

gutter:

8px

numCols:

xRadius:

220px

yRadius:

130px

cornerRadius:

50px

fringeWidth:

160px

gravitation:

showGuides:

compact:

provideProps:

Resulting React.js Code

// myComponent.js

import BubbleUI from "react-bubble-ui";
import "react-bubble-ui/dist/index.css";
import Child from "./ChildComponent";
import "./myComponent.css";

export default function myComponent(props) {
	const options = {
		size: 180,
		minSize: 20,
		gutter: 8,
		provideProps: true,
		numCols: 6,
		fringeWidth: 160,
		yRadius: 130,
		xRadius: 220,
		cornerRadius: 50,
		showGuides: false,
		compact: true,
		gravitation: 5
	}

	const children = props.data.map((data, i) => {
		 return <Child data={data} className="child" key={i}>
	});

	return (<BubbleUI options={options} className="myBubbleUI">
		{children}
	</BubbleUI>)
};
/* myComponent.css */

.myBubbleUI {
	width: 100%;
	max-width: 1000px;
	height: 500px
	border-radius: 50px
}

.child {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

Understanding Layout Dimensions

xRadius

yRadius

cornerRadius

fringeWidth

Center
Region

Fringe Region

Each bubble's size is defined by its position relative to the center and fringe regions.

If a bubble's center is within the center region, it has maximum size.

If a bubble's center is outside the fringe region, it has minimum size.

If a bubble's center is within the fringe region, its size is interpolated between its min and max values, depending on its current progression through the fringe.

Options Prop Documentation

The React-Bubble-UI component takes one prop, options, which is an object specifying any or all of the following:

size, Number

200 by default , range [minSize, Infinity)

The maximum diameter of a bubble, in pixels

size: 50

size: 100

minSize, Number

20 by default , range [0, size]

The minimum diameter of a bubble, in pixels

minSize: 5

minSize: 20

gutter, Number

16 by default , range [0, Infinity)

The distance between individual bubbles, in pixels

gutter: 0

gutter: 30

numCols, Number

6 by default , range [2, len(children components)]

The number of columns into which bubbles are organized. Rows are composed accordingly

numCols: 3

numCols: 10

xRadius, Number

200 by default , range [0, Infinity)

The horizontal radius of the region where bubbles are at their maximum size, in pixels

xRadius: 50

xRadius: 120

yRadius, Number

200 by default , range [0, Infinity)

The vertical radius of the region where bubbles are at their maximum size, in pixels

yRadius: 50

yRadius: 120

cornerRadius, Number

100 by default , range [0, min(xRadius, yRadius)]

The amount by which the corners of the region where bubbles are at their maximum size are rounded, in pixels. If this value is equal to xRadius and yRadius, a circle inscribes the region

cornerRadius: 0

cornerRadius: 100

fringeWidth, Number

100 by default , range [0, Infinity)

The width of the fringe, or region just outside the center where bubbles grow from their minimum to maximum size, in pixels

fringeWidth: 40

fringeWidth: 130

gravitation, Number

0 by default , range [0, 10]

The amount, scaled 0 to 10, by which exterior bubbles are attracted to the center region

gravitation: 0

gravitation: 9

showGuides, boolean

false by default

Whether or not the visual guides, including center region and fringe, are show over the bubbles. Useful when designing the bubble layout

showGuides: false

showGuides: true

compact, boolean

false by default

Whether or not bubbles near the center region should fill in space wherever possible

compact: false

compact: true

provideProps, boolean

false by default

Whether or not bubbleSize, distanceToCenter, maxSize, and minSize values are passed to corresponding children as props

provideProps: false

provideProps: true

Size:
80

Size:
43

Size:
10

Size:
80

Size:
11

Size:
10

Size:
80

Size:
48

Size:
10

Size:
36

Size:
42

Size:
35

Size:
10

Styling BubbleUI and its Children

The styling of the outer container and child components is kept open to the user.

The outer container of BubbleUI requires height and width dimensions to be rendered. Feel free to also add borders, a background color, rounded corners, or any other styles to your liking.

Children components are rendered into a fixed-dimension container. This means adequate styles are necessary fit your component to for this container. Bubbles are also not rounded, by default.

We recommend these minimum styles for your BubbleUI and children components:

.bubbleUI {
	width: 600px; /* width of BubbleUI container */
	height: 400px; /* height of BubbleUI container */
}

.childComponent {
	width: 100%; /* width expands to fit bubble */
	height: 100%; /* width expands to fit bubble */
	border-radius: 50%; /* rounded border forms a circle */
}