react-input-progress

A React component to create a rounded progress bar as you type an input

Usage no npm install needed!

<script type="module">
  import reactInputProgress from 'https://cdn.skypack.dev/react-input-progress';
</script>

README

react-input-progress

A React component to create a round input progress as you type in an input

Inspired by twitter's input progress

  • 🐦 1kb compressed
  • 💅 Control the size and color
  • 📝 Works in any text input

Future features

  • Animation when reached max input limit
  • Other formats besides rounded progress bar
  • Ideas are welcome...

Installation

yarn add react-input-progress

# or

npm install --save react-input-progress

Usage

import { useState } from "react";
import InputProgress from "react-input-progress";

function Form() {
  const [inputValue, setInputValue] = useState();
  const maxLength = 20;

  return (
    <form>
      <input type="text" value={inputValue} maxLength={maxLength}>
      <InputProgress input={inputValue} maxLength={maxLength} />
    </form>
  )
}

react-input-progress works better for controlled inputs.

Props

required

  • input (string): the current input value.

  • maxLength (number): the maximum length of the input.

optional

  • size: define the input-progress size. Defaults to sm.

It can receive the following values:

size: "x-sm" | "sm" | "md" | "lg" | "x-lg";
  • progressColor (string): defines the dynamic progress color (increases on each input, until completion). Defaults to #5b77e6.

  • circleColor (string): defines the inner static circle color. Defaults to #e5e5e5.

  • strokeWidth (number): defines the stroke width. Defaults to 4.

Contribute

PRs and discussions to improve this simple component are more than welcome =)