https://github.com/itsjonq/progress-kit

⏳ A Progress Component Toolkit for React
https://github.com/itsjonq/progress-kit

accessibility component progress progress-bar react toolkit

Last synced: 2 months ago
JSON representation

⏳ A Progress Component Toolkit for React

• Host: GitHub
• URL: https://github.com/itsjonq/progress-kit
• Owner: ItsJonQ
• License: mit
• Created: 2019-11-28T03:07:50.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T19:51:25.000Z (about 2 years ago)
• Last Synced: 2024-11-13T16:54:05.483Z (2 months ago)
• Topics: accessibility, component, progress, progress-bar, react, toolkit
• Language: JavaScript
• Homepage:
• Size: 281 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⏳ ProgressKit

[![Build Status](https://travis-ci.org/ItsJonQ/progress-kit.svg?branch=master)](https://travis-ci.org/ItsJonQ/progress-kit)

> A Progress Component Toolkit for React

## Table of contents

-   [Installation](#installation)

-   [Usage](#usage)

    -   [Ready-made Progress Indicators](#ready-made-progress-indicators)

    -   [Creating your own](#creating-your-own)

## Installation

```

npm install progress-kit

```

## Usage

### Ready-made Progress Indicators

```jsx

import React from "react";

import { ProgressBar } from "progress-kit";

function Example() {

	return ;

}

```

### Creating your own

The `useProgressState` hook is inspired by the patterns from [Reakit](https://reakit.io/).

```jsx

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 (

		

	);

}

MyProgressBar.defaultProps = defaultProps;

export default ProgressBar;

```