Get unlimited public & private packages + team-based management with npm Teams.Learn more »

in-orbit

1.0.4 • Public • Published

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.

Install

npm i in-orbit

DownloadsWeekly Downloads

1

Version

1.0.4

License

ISC

Unpacked Size

20.7 kB

Total Files

4

Last publish

Collaborators

  • avatar