⏳ ProgressKit

A Progress Component Toolkit for React

Table of contents

• Installation
• Usage
  • Ready-made Progress Indicators
  • Creating your own

Installation

npm install progress-kit

Usage

Ready-made Progress Indicators

import React from "react";
import { ProgressBar } from "progress-kit";

function Example() {
	return <ProgressBar />;
}

Creating your own

The useProgressState hook is inspired by the patterns from Reakit.

import React from "react";
import { View } from "styled-view";
import { progressDefaultProps, useProgressState } from "progress-kit";

export const defaultProps = {
	...progressDefaultProps,
	color: "currentColor",
	height: 20,
	transition: "all 200ms ease"
};

export function MyProgressBar(props) {
	const { color, transition, height, ...restProps } = props;

	const { progress, progressProps } = useProgressState(props);

	const barCssProps = {
		backgroundColor: color,
		height,
		transition
	};

	return (
		<View
			{...progressProps}
			{...barCssProps}
			style={{
				width: `${progressStateProps.progress}%`
			}}
		/>
	);
}

MyProgressBar.defaultProps = defaultProps;

export default ProgressBar;