1.0.4 • Published 3 months ago

react-planet-r18 v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

react-planet-r18

Version Downloads 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-r18

Concept

Basic Example

import { Planet } from "react-planet-r18";

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

nametypeexample /defaultdescription
centerContentReact.Node?The planet component
orbitRadiusnumber?120How far the satellites are away from the planet
openboolean?falseSet the open/close state from outside
autoCloseboolean?falseIf true the planet handles the open/close state by itself
hideOrbitboolean?falseIf true the orbit is hidden / not rendered
rotationnumber?0The angle for the rotation of all satellites around the planet
satelliteOrientationDEFAULT INSIDE OUTSIDE READABLEundefined / DEFAULTThe angle for the rotation of one satellite itself
dragableSatellitesboolean?falseIf true you can click and drag a satellite
dragRadiusSatellitesnumber?12Defines how much you can drag the satellites
dragablePlanetboolean?falseIf true you can click and drag the planet
dragRadiusPlanetnumber?12Defines how much you can drag the planet
bounceboolean?falseIf true the planet bounces on open and close
bounceOnOpenboolean?falseIf true the planet bounces only on open
bounceOnCloseboolean?falseIf true the planet bounces only on close
bounceRadiusnumber?3Defines how much the planet bounces
bounceDirectionTOP BOTTOM LEFT RIGHTundefinedOn hight bounceRadius you can see a direction
tensionnumber?500a react-spring animation physic value
frictionnumber?17a react-spring animation physic value
massnumber?1a react-spring animation physic value
orbitStyle(default: CSSProperties)=>CSSProperties() => ({borderWidth: 4})You can override or set a new style for the orbit
onClick(e: MouseEvent)=>void()=>{}The function is triggered if you click on the centerComponent
onClose(e: MouseEvent)=>void()=>{}The function is triggered if the planet wants to close

Start Storybook local

npm install
npm start

Made by:

https://innFactory.de/