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: 3 months 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 7 years ago)
- Default Branch: master
- Last Pushed: 2024-02-28T23:43:38.000Z (over 1 year ago)
- Last Synced: 2025-07-18T03:48:35.327Z (4 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: 35
- Watchers: 3
- Forks: 17
- Open Issues: 6
-
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.