0.1.5 • Published 2 years ago
react-circle-spinner v0.1.5
react-circle-spinner
A customisable circle spinner built with React. Animations are provided by Framer Motion and the circle is created using React minimal pie chart
Live Demo
Installation
Use the following commands to install the package:
npm:
npm install react-circle-spinneryarn:
yarn add react-circle-spinnerUsage
import CircleSpinner from 'react-circle-spinner';<CircleSpinner
segments={[
{ title: 'Yes', value: 50, color: 'green' },
{ title: 'No', value: 50, color: 'red' }
]}
spinOnClick
/>Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| segments | array | - | x | Array of segment objects to build up the circle |
| onResult | function | - | Callback function when the spinner lands on an item. The title of the segment will be returned to this function | |
| rotationsBeforeEnd | number | 2 | Number of spins before an answer is selected | |
| onSpinStart | function | - | Callback function when the spinner starts to spin | |
| spinOnClick | boolean | false | When true clicking on the spinner will trigger it to spin | |
| containerStyles | object | - | Style object to be passed to the container which holds the circle and the needle | |
| circleStyles | object | - | Style object to be passed to the circle | |
| needleStyles | object | - | Style object to be passed to the needle | |
| size | number | 200 | The size in pixels for the spinner | |
| needleWidth | number | size / 40 | Width of the needle | |
| needleLength | number | size * 0.75 | Length of the needle | |
| labelStyle | object | function | { fontSize: segment.value / 3 } | Style to be provided to the labels. Either a style object or function that returns a style object where the parameter for the function is the segment index |
TODO
- Convert library to use TypeScript
License
MIT