⏳ 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;