<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:
;
Wrap the components you would like to render in a circle with the RadialRender
component.
Pass prop r
as the radius
<RadialRender => <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: PropTypesnumberisRequired
The radius to render all components in a circle. Components will be rendered at their centerpoint along the radius.