react-radial-render

<RadialRender />

Render React components in a circle

Requirements

React 16.8.1

Version Notes

This component has been simplified in version 2.0.0-alpha. The only required prop is r and the components are passed as children.

Install

npm i react-radial-render

Usage

Import the RadialRender component:

import RadialRender from "react-radial-render";

Wrap the components you would like to render in a circle with the RadialRender component. Pass prop r as the radius

<RadialRender r={70}>
  <CircleBnt>1</CircleBnt>
  <CircleBnt>2</CircleBnt>
  <CircleBnt>3</CircleBnt>
  <CircleBnt>4</CircleBnt>
  <CircleBnt>5</CircleBnt>
  <CircleBnt>6</CircleBnt>
  <CircleBnt>7</CircleBnt>
  <CircleBnt>8</CircleBnt>
</RadialRender>

Components will render clockwise starting from the top right

Result:

The components will be rendered along the radius at the center point of each component.

Props

r

r: PropTypes.number.isRequired

The radius to render all components in a circle. Components will be rendered at their centerpoint along the radius.