react-planet

A react lib for building circular menus in a very easy and handy way.

Live-Demo: STORYBOOK

Read the full story @ Medium or innFactory-Blog

install

npm install --save react-planet

Concept

Basic Example

import { Planet } from 'react-planet';

export function MyPlanet() {
	return (
		<Planet
			centerContent={
				<div
					style={{
						height: 100,
						width: 100,
						borderRadius: '50%',
						backgroundColor: '#1da8a4',
					}}
				/>
			}
			open
			autoClose
		>
			<div
				style={{
					height: 70,
					width: 70,
					borderRadius: '50%',
					backgroundColor: '#9257ad',
				}}
			/>
			<div
				style={{
					height: 70,
					width: 70,
					borderRadius: '50%',
					backgroundColor: '#9257ad',
				}}
			/>
		</Planet>
	);
}

Change the orbit

<Planet centerContent={div style={...yourStlye}/>}
        open
        orbitRadius={120}
        rotation={30}
        ...
>

Orbit Style

<Planet
	orbitStyle={(defaultStyle) => ({
		...defaultStyle,
		borderWidth: 4,
		borderStyle: 'dashed',
		borderColor: '#6f03fc',
	})}
	centerContent={<div className={classes.planetSmall} />}
	open
>
	<div className={classes.satellite1} />
	<div className={classes.satellite2} />
	<div className={classes.satellite3} />
</Planet>

Weird satellites and their orientation

<Planet
    // set one of the orientations
    satelliteOrientation="INSIDE"

Bring it to life

<Planet
    dragablePlanet
    dragRadiusPlanet={20}
    bounce

Planetception

Nested planets

Code: /src/stories/Planetception.stories.tsx

Fake the space

<Planet
	centerContent={<YourButton0 />}
	hideOrbit
	autoClose
	orbitRadius={60}
	bounceOnClose
	rotation={105}
	// the bounce direction is minimal visible
	// but on close it seems the button wobbling a bit to the bottom
	bounceDirection="BOTTOM"
>
	<YourButton1 />
	<YourButton2 />
	<YourButton3 />
	<div />
	<div />
	<div />
	<div />
</Planet>

Alter the physics

<Planet
      mass={4}
      tension={500}
      friction={19}

Props

Start Storybook local

npm install
npm start

Made by:

https://innFactory.de/