# in-orbit

> A package for adding progress circle animations to your react app.

Latest version **1.0.4** (published 2019-04-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install in-orbit
pnpm add in-orbit
yarn add in-orbit
bun add in-orbit
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-04-25 |
| First published | 2019-04-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sutras |
| Maintainers | sutras |
| Keywords | progress, circle, animation, pagination, react |

## Links

- npm: https://www.npmjs.com/package/in-orbit
- Repository: https://github.com/Audiosutras/in-orbit
- Homepage: https://github.com/Audiosutras/in-orbit#readme
- Issues: https://github.com/Audiosutras/in-orbit/issues
- npm.io page: https://npm.io/package/in-orbit

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2019-04-25
- 1.0.3 — 2019-04-25
- 1.0.2 — 2019-04-25
- 1.0.1 — 2019-04-24
- 1.0.0 — 2019-04-23

## README

# 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.

```javascript
  import React from 'react';
  import { ProgressIterator, Basic, Hazard, Revolve } from 'in-orbit';
```

#### Component Syntax.

```javascript
// 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.

```javascript
// 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](https://docs-in-orbit.herokuapp.com/) 
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.

---
_Source: https://npm.io/package/in-orbit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._