react-stepper-primitive

react-stepper-primitive

React primitives for a "stepper" component.

So you can build this:

ReactDOM.render(
  <Stepper
    min={1}
    max={100}
    render={({
      getFormProps,
      getInputProps,
      getIncrementProps,
      getDecrementProps
    }) =>
      <form {...getFormProps()}>
        <button className='my-button' {...getDecrementProps()}>
          <img src='/assets/svg/minus.svg' />
        </button>
        <input className='my-step-input' {...getInputProps()} />
        <button className='my-button' {...getIncrementProps()}>
          <img src='/assets/svg/plus.svg' />
        </button>
      </form>}
  />,
  document.body
)

Why?

Because a stepper (minus button, input, plus button) is non-trivial. There's a lot to manage: there's a minimum and maximum. There's the input displaying the current value. There's the input allowing free-type while the user focuses the input, then interpreting the user's value once they blur it.

These primitives manage the data manipulation for you so you only have to worry about the styling.

Install

$ npm install --save react-stepper-primitive

API

<Stepper>

Props

defaultValue

number | default 0 | optional

The initial value.

onChange

function | optional

Called when the value changes, with the new value as the only argument.

value

number | optional

The value. If no value is passed in, the stepper will manage its value via its own internal state.

If value is passed in, the stepper becomes a "controlled component".

The onChange function passed in will be called whenever value changes, whether you pass it in or not.

Note: This is very similar to how normal controlled components work elsewhere in react (like <input />).

min

number | optional, no default

The value cannot go below this minimum.

max

number | optional, no default

The value cannot go above this maximum.

step

number | default 1 | optional

Every click on the increment or decrement button increases the value by step.

render

function() | required

<Stepper render={() => <div />} />

The render prop function is called with the following object:

property	category	type	description
value	state	number	The current value of the stepper
focused	state	boolean	Whether the input is currently focused.
getFormProps	prop getter	function	Returns the props you should apply to a form element (for submit handling)
getInputProps	prop getter	function	Returns the props you should apply to an input element (for displaying and free-form modification of the current value)
getDecrementProps	prop getter	function	Returns the props you should apply to a decrement button
getIncrementProps	prop getter	function	Returns the props you should apply to an increment button
increment	setter	function	Increment the value by one. Value cannot go under props.min.
decrement	setter	function	Decrement the value by one. Value cannot go over props.max.
setValue	setter	function	Set a new value. Value is coerced to stay between props.min and props.max.

enableReinitialize

boolean | default false | optional

Control whether the current value (if unchanged) will update to the new default if defaultValue changes.

Related Work

Thanks to Kent C Dodds for formalizing the "prop getters" idea in downshift. And for the readme formatting, which I've stolen.

License

MIT © Andrew Joslin