# bpk-component-nudger-css

> Backpack nudger component.

Latest version **7.0.2** (published 2022-05-20) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install bpk-component-nudger-css
pnpm add bpk-component-nudger-css
yarn add bpk-component-nudger-css
bun add bpk-component-nudger-css
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 7.0.2 |
| Published | 2022-05-20 |
| First published | 2020-07-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 39.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 543 |
| Author | Backpack Design System |
| Maintainers | k0nserv, shaundon, georgegillams, tiagohngl, ojcurt |

## Links

- npm: https://www.npmjs.com/package/bpk-component-nudger-css
- Repository: https://github.com/Skyscanner/backpack
- Homepage: https://github.com/Skyscanner/backpack#readme
- Issues: https://github.com/Skyscanner/backpack/issues
- npm.io page: https://npm.io/package/bpk-component-nudger-css

## Dependencies (7)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [lodash.clamp](https://npm.io/package/lodash.clamp.md) ^4.0.3
- [bpk-mixins-css](https://npm.io/package/bpk-mixins-css.md) ^31.0.0
- [bpk-react-utils-css](https://npm.io/package/bpk-react-utils-css.md) ^4.1.1
- [bpk-component-icon-css](https://npm.io/package/bpk-component-icon-css.md) ^9.2.9
- [bpk-component-button-css](https://npm.io/package/bpk-component-button-css.md) ^6.2.3
- [@skyscanner/bpk-foundations-web-css](https://npm.io/package/@skyscanner/bpk-foundations-web-css.md) ^8.0.0

## Recent versions

- 7.0.2 (latest) — 2022-05-20
- 7.0.0 — 2022-04-29
- 6.0.4 — 2022-04-27
- 6.0.2 — 2022-04-14
- 6.0.1 — 2022-04-04
- 5.1.2 — 2022-03-22
- 5.1.1 — 2022-03-02
- 5.0.7 — 2022-02-17
- 5.0.4 — 2022-02-08
- 5.0.2 — 2022-02-07
- 5.0.1 — 2022-02-02
- 4.0.19 — 2021-12-09
- 4.0.17 — 2021-12-01
- 4.0.16 — 2021-11-29
- 4.0.15 — 2021-11-15
- … 69 more at https://npm.io/package/bpk-component-nudger-css/versions

## README

# bpk-component-nudger

> Backpack nudger component.

## Installation

```sh
npm install bpk-component-nudger --save-dev
```

## Usage

### `BpkNudger`

```js
import React, { Component } from 'react';
import BpkLabel from 'bpk-component-label';
import BpkNudger from 'bpk-component-nudger';

class App extends Component {
  constructor() {
    super();

    this.state = {
      value: 1,
    };
  }

  handleChange = value => {
    this.setState({ value });
  };

  render() {
    return (
      <div>
        <BpkLabel htmlFor="my-nudger">Number of passengers</BpkLabel>
        <BpkNudger
          id="my-nudger"
          min={1}
          max={10}
          value={this.state.value}
          onChange={this.handleChange}
          decreaseButtonLabel="Decrease"
          increaseButtonLabel="Increase"
        />
      </div>
    );
  }
}
```

### `BpkConfigurableNudger`

```js
import React, { Component } from 'react';
import BpkLabel from 'bpk-component-label';
import { BpkConfigurableNudger } from 'bpk-component-nudger';

const options = ['economy', 'premium', 'business', 'first'];

const compareValues = (value1, value2) => {
    const [aIndex, bIndex] = [options.indexOf(value1), options.indexOf(value2)];
    return aIndex - bIndex;
  };

const incrementValue = currentValue => {
    const [aIndex] = [options.indexOf(currentValue) + 1];
    return options[aIndex];
  };

const decrementValue = currentValue => {
    const [aIndex] = [options.indexOf(currentValue) - 1];
    return options[aIndex];
  };

const formatValue = currentValue => currentValue.toString();

class App extends Component {
  constructor() {
    super();

    this.state = {
      value: 1,
    };
  }

  handleChange = value => {
    this.setState({ value });
  };

  render() {
    return (
      <div>
        <BpkLabel htmlFor="nudger">Number of passengers</BpkLabel>
        <BpkConfigurableNudger
          id="nudger"
          min="economy"
          max="first"
          value={this.state.value}
          onChange={this.handleChange}
          decreaseButtonLabel="Decrease"
          increaseButtonLabel="Increase"
          compareValues={compareValues}
          incrementValue={incrementValue}
          decrementValue={decrementValue}
          formatValue={formatValue}
        />
      </div>
    );
  }
}
```

## Props

### BpkNudger

| Property            | PropType                      | Required | Default Value |
| ------------------- | ----------------------------- | -------- | ------------- |
| id                  | string                        | true     | -             |
| decreaseButtonLabel | string                        | true     | -             |
| increaseButtonLabel | string                        | true     | -             |
| max                 | number                        | true     | -             |
| min                 | number                        | true     | -             |
| onChange            | func                          | true     | -             |
| value               | number                        | true     | -             |
| className           | string                        | false    | null          |
| buttonType          | oneOf('secondary', 'secondaryOnDark') | false    | secondary     |

### BpkConfigurableNudger

| Property            | PropType                      | Required | Default Value |
| ------------------- | ----------------------------- | -------- | ------------- |
| id                  | string                        | true     | -             |
| decreaseButtonLabel | string                        | true     | -             |
| increaseButtonLabel | string                        | true     | -             |
| max                 | number                        | true     | -             |
| min                 | number                        | true     | -             |
| onChange            | func                          | true     | -             |
| value               | number                        | true     | -             |
| compareValues       | func                          | true     | -             |
| incrementValue      | func                          | true     | -             |
| decrementValue      | func                          | true     | -             |
| formatValue         | func                          | true     | -             |
| className           | string                        | false    | null          |
| inputClassName      | string                        | false    | null          |
| buttonType          | oneOf('secondary', 'secondaryOnDark') | false    | secondary     |

### `compareValues`

Given `a` and `b`:
- If `a` is less than `b` then `compareValues(a, b)` should return a value less than `0`
- If  `a` and `b` are equal then `compareValues(a, b)` should return exactly `0`
- If `a` is greater than `b` then `compareValues(a, b)` should return a value greater than `0`

We use this along with the `min` and `max` values to determine when we should disable the increment and decrement buttons. This is inspired by the `compareFunction` in [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description)

For integer numbers the following is a correct implementation `const compareValues = (a: number, b: number): number => a - b;`

### `incrementValue` & `decrementValue`

Functions that handle the incrementing or decrementing of the current selected value.

### `formatValue`

A simple function that will allow you to set the format of the display value e.g. local dates or times.

## Theme Props

Same as [secondary button](/components/web/buttons#theme-props)

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