https://github.com/yasaricli/react-native-counters

React native Minus(-) (Number) Plus(+) Component
https://github.com/yasaricli/react-native-counters

component minus plus react react-na

Last synced: about 1 month ago
JSON representation

React native Minus(-) (Number) Plus(+) Component

• Host: GitHub
• URL: https://github.com/yasaricli/react-native-counters
• Owner: yasaricli
• License: mit
• Created: 2018-09-28T06:11:46.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-02-28T23:43:38.000Z (10 months ago)
• Last Synced: 2024-04-26T02:36:28.225Z (8 months ago)
• Topics: component, minus, plus, react, react-na
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-native-counters
• Size: 1.57 MB
• Stars: 32
• Watchers: 4
• Forks: 17
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-counters ★0 - Minus Plus Counter for React Native (Components / UI)
• awesome-react-native - react-native-counters ★0 - Minus Plus Counter for React Native (Components / UI)
• awesome-react-native - react-native-counters ★0 - Minus Plus Counter for React Native (Components / UI)
• awesome-react-native - react-native-counters ★0 - Minus Plus Counter for React Native (Components / UI)

README

        


  





  React native Minus(-) (Number) Plus(+) Component



## Installation

To install a stable release use:

##### yarn

`yarn add react-native-counters`

##### npm

`npm i react-native-counters --save`

## Example

Simple use only uses the Text plus minus component.

```JS

import Counter from "react-native-counters";

class Example Component {

  onChange(number, type) {

    console.log(number, type) // 1, + or -

  }

  

  render() {

    return (

      

    )

  }

}

```

For all uses [ALL_USES](docs/ALL_USES.md)

If you want to **customize** `(minusIcon, plusIcon)` the buttons [USE_CUSTOM_ICON](docs/USE_CUSTOM_ICON.md)

### Props

Some default props and descriptions.

| PropName        |                      Description                      |     type | Default |

|-----------------|:-----------------------------------------------------:|---------:|--------:|

| minus           |  If you are not using minusIcon, it shows directly.   |   String |       - |

| plus            |   If you are not using plusIcon, it shows directly.   |   String |       + |

| start           |                  The starting number                  |   Number |       0 |

| min             |          Minus the minimum selected number.           |   Number |       0 |

| max             |              The most selectable number.              |   Number |      10 |

| minusIcon       |        You can use it to change the minusIcon.        | Function |    null |

| plusIcon        |        You can use it to change the plusIcon.         | Function |    null |

| buttonStyle     |       You can change the types of all buttons.        |   Object |      {} |

| buttonTextStyle |          Minus or plus styles in the button           |   Object |      {} |

| countTextStyle  |             styles of increasing number.              |   Object |      {} |

| increment       | You can use it to change the increment between steps. |   Number |       1 |

### Contributing

This project exists thanks to all the people who contribute.