# react-incrementor

> Component for building flexible incrementor components

Latest version **1.0.5** (published 2019-01-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-incrementor
pnpm add react-incrementor
yarn add react-incrementor
bun add react-incrementor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-01-28 |
| First published | 2018-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mircea Staicu |
| Maintainers | mstaicu |
| Keywords | react, incrementor, accesibility |

## Links

- npm: https://www.npmjs.com/package/react-incrementor
- Repository: https://github.com/mstaicu/react-incrementor
- Homepage: https://github.com/mstaicu/react-incrementor#readme
- Issues: https://github.com/mstaicu/react-incrementor/issues
- npm.io page: https://npm.io/package/react-incrementor

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2019-01-28
- 1.0.4 — 2018-01-08
- 1.0.3 — 2018-01-07
- 1.0.2 — 2018-01-04
- 1.0.1 — 2018-01-04
- 1.0.0 — 2018-01-04

## README

# ✨react-incrementor🎄

[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![downloads][downloads-badge]][npmcharts]
[![PRs Welcome][prs-badge]][prs]
[![MIT License][license-badge]][license]

Component to build simple, flexible, and accessible incrementor components

## The problem

You want an incrementor component that's simple and gives you complete control over
rendering and state.

## This solution

This follows the `controlled prop pattern` and `render prop pattern` to expose an API that
renders nothing and simply encapsulates the logic of a incrementor component.

## Table of Contents

* [Installation](#installation)
* [Usage](#usage)
* [Props:](#props)
  * [defaultValue](#defaultvalue)
  * [value](#value)
  * [onChange](#onchange)
  * [render](#render)
* [Inspiration](#inspiration)
* [LICENSE](#license)

## Installation

This module is distributed via `npm`, which is bundled with `node`, and
should be installed as one of your project's `dependencies`:

```
npm install --save react-incrementor
```

> This package also depends on `react` and `prop-types`. Please make sure you
> have those installed as well.

## Usage

```jsx
import React from 'react';
import { render } from 'react-dom';

import Incrementor from 'react-incrementor';

function BasicIncrementor() {
  return (
    <Incrementor
      render={({ value, getDecrementerProps, getIncrementerProps }) => {
        return (
          <div>
            <div>
              <span>{value}</span>
            </div>

            <div>
              <button {...getDecrementerProps()}>Minus 1</button>
              <button {...getIncrementerProps()}>Plus 1</button>
            </div>
          </div>
        );
      }}
    />
  );
}

render(<BasicIncrementor />, document.getElementById('root'));
```

`react-incrementor` is the only component. It doesn't render anything itself, it just
calls the `render` function and renders that.

## Props:

### defaultValue

> `number` | defaults to `0`

The default `value` state.

### value

> `number` | **control prop**

react-incrementor manages its own state internally and calls your `onChange`
handler whenever the `value` state changes. Pass the `value` state as a prop
and that state becomes controlled. It is your responsibility to keep the `value` updated by re-rendering the component.

### onChange

> `function(value: number)` | optional

Called at interaction with the incrementor

### render

> `function({})` | _required_

This is called with an object that exposes the public API of this component.

The function is passed as the render prop:
`<Incrementor render={(value) => {/* awesome code */}} />`

<!-- This table generated via http://www.tablesgenerator.com/markdown_tables -->

| property              | category    | type                      | description                                                                                                  |
| --------------------- | ----------- | ------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `value`               | state       | `boolean`                 | The current `value` state of the incrementor                                                                 |
| `getIncrementerProps` | prop getter | `function(props: object)` | returns the props you should apply to the incrementer button element you render. Includes `aria-` attributes |
| `getDecrementerProps` | prop getter | `function(props: object)` | returns the props you should apply to the decrementer button element you render. Includes `aria-` attributes |

## Inspiration

This was build as a learning exercise for the `controlled prop pattern` and `render prop pattern`. It is heavily influenced by [Kent C. Dodds](https://github.com/kentcdodds)'s [react-toggled](https://github.com/kentcdodds/react-toggled) component

## LICENSE

MIT

[build-badge]: https://img.shields.io/travis/mstaicu/react-incrementor.svg?style=flat-square
[build]: https://travis-ci.org/mstaicu/react-incrementor
[coverage-badge]: https://img.shields.io/codecov/c/github/mstaicu/react-incrementor.svg?style=flat-square
[coverage]: https://codecov.io/github/mstaicu/react-incrementor
[downloads-badge]: https://img.shields.io/npm/dm/react-incrementor.svg?style=flat-square
[npmcharts]: http://npmcharts.com/compare/react-incrementor
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[license-badge]: https://img.shields.io/npm/l/react-incrementor.svg?style=flat-square
[license]: https://github.com/mstaicu/react-incrementor/blob/master/LICENSE

---
_Source: https://npm.io/package/react-incrementor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._