react-counter-input

Installation and Usage

The easiest way to use react-counter-input is to install it from npm:

npm install react-counter-input

Then use it in your app:

import React from "react";
import CounterInput from "react-counter-input";
 
class App extends React.Component {
  render() {
    return (
      <CounterInput
        min={0}
        max={10}
        onCountChange={count => console.log(count)}
      />
    );
  }
}

For more examples, check out the Storybook.

Basic Props

count

number | optional, defaults to 0

The initial count.

max

number | optional

The maximum count.

min

number | optional

The minimum count.

onCountChange

function | optional

Handler function that gets called with the current count anytime the count state changes.

Style Props

Style props get merged in with the default styles, allowing you to override specific properties.

wrapperStyle

object | optional

Styles applied to the top level wrapper element.

btnStyle

object | optional

Styles applied to the increment and decrement buttons.

inputStyle

object | optional

Styles applied to the text input element.

Render Prop

If you want to have more low level control over how the component looks and behaves, use the children render prop API.

children

function | optional