in-orbit v1.0.4
in-orbit
A react component library for rending beautiful progress circle animations.
Tutorial
We have installed in-orbit using npm i in-orbit or yarn add in-orbit. Now let's import what we need. ProgressIterator is required. Available progress circle animations include Basic, Revolve, and Hazard. Choose one or all of them.
import React from 'react';
import { ProgressIterator, Basic, Hazard, Revolve } from 'in-orbit';Component Syntax.
// w/o array provided to ProgressIterator
const Component = () => {
return (
<ProgressIterator>
{({ percent }) => <Revolve percent={percent} />}
</ProgressIterator>
);
};
export default Component;In the above example, we just want to use the animation. percent is a required prop passed from ProgressIterator children to the animation component. It must be passed to the animation component in order for it to render properly.
// w array provided to ProgressIterator, currentIndex becomes available in children
const colors = ['red', 'white', 'blue', 'green', 'orange'];
const Component = () => {
return (
<ProgressIterator paginateArr={colors}>
{({ percent, currentIndex }) => <Revolve percent={percent} color={colors[currentIndex]} genesis flash />}
</ProgressIterator>
);
};
export default Component; We have an array that we want to paginate through. We pass the array to the ProgressIterator component using the paginateArr prop. currentIndex is now made available in children along with percent. When the animation is completed, currentIndex is updated with the next index. ProgressIterator will continuously cycle through all indices of the provided array. In the above example, whenever the animation completes, we want the color of the animation to change.
API
| Property | Description | Type | Component | Default |
|---|---|---|---|---|
| paginateArr | returns the currentIndex of the array passed in props to children. When the animation is completed, the currentIndex is updated and returned. Continuously cycles through the indices of the array provided. Useful for Pagination. | array | ProgressIterator | (Optional) |
| seconds | speed of the animation from start to completion | number | ProgressIterator | (Optional) |
| percent | passed as a prop from ProgressIterator component, responsible for animating animation components | number | Revolve, Basic, Hazard | required |
| diameter | diameter of the outer circle to be created. Inner circle's diameter is proportional to the diameter set here. | number | Revolve, Basic, Hazard | 30 |
| strokeWidth | width of the stroke that revolves around each circle. Helps determine radius. | number | Revolve, Basic, Hazard | 2 |
| color | color of the stroke | string | Revolve, Basic, Hazard | (Optional) |
| outlineColor | color of stationary circle | string | Revolve, Basic, Hazard | color prop |
| showOutline | pass prop to set to true. Stationary circle will be made visible. | boolean | Revolve, Basic, Hazard | false |
| sync | pass prop to set to true. Aligns the start of the animation with the top of the page. | boolean | Revolve, Hazard | false |
| genesis | pass prop to set to true, a special variation of the animation. | boolean | Revolve | false |
| flash | pass prop to set to true, whether or not the inner circle will appear filled when animation is at 90% and 94% completed. | boolean | Revolve | false |
| lg | pass prop to set to true, diameter is set to 40. | string | Revolve, Hazard, Basic | (Optional) |
| strokeOpacity | used for setting the opacity of the animation. | Float (0 - 1) | Basic | 0.7 |
Documentation The above documentation is hosted on Heroku. A server may need to be spun to server the content if the page hasn't been accessed for some time. Loading times may be slow, and on first load the page may show an application error. Just reload the page again and the content will be served.