Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-counter-input
Counter Input with fully customizable options for React Native
https://github.com/wrathchaos/react-native-counter-input
android apple counter counters google input ios javascript react react-native react-native-counter text-input typescript
Last synced: 3 months ago
JSON representation
Counter Input with fully customizable options for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-counter-input
- Owner: WrathChaos
- License: mit
- Created: 2020-10-03T09:14:42.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-10T19:59:07.000Z (over 1 year ago)
- Last Synced: 2024-10-25T16:59:09.756Z (3 months ago)
- Topics: android, apple, counter, counters, google, input, ios, javascript, react, react-native, react-native-counter, text-input, typescript
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 31.4 MB
- Stars: 20
- Watchers: 3
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-counter-input)
[](https://www.npmjs.com/package/react-native-counter-input)
[](https://www.npmjs.com/package/react-native-counter-input)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```bash
npm i react-native-counter-input
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"@freakycoder/react-native-bounceable": ">= 0.1.1",
```
# Usage
## Import
```jsx
import CounterInput from "react-native-counter-input";
```
## Fundamental Usage
```jsx
{
console.log("onChange Counter:", counter);
}}
/>
```
# Configuration - Props
| Property | Type | Default | Description |
|-------------------------------|:---------:|:---------:|-------------------------------------------------------------------------------------------|
| style | style | default | change/override the main container style |
| horizontal | boolean | false | make the button horizontal design |
| initial | number | 0 | set the initial value for the counter input |
| onChange | function | undefined | set your own logic for onChange method, it triggers on any change |
| onChangeText | function | undefined | it triggers when the TextInput changes |
| onIncreasePress | function | undefined | it triggers when the increase button is pressed |
| onDecreasePress | function | undefined | it triggers when the decrease button is pressed |
| backgroundColor | string | #fff | change the CounterInput's background color |
| min | number | undefined | set a minimum input value |
| max | number | undefined | set a maximum input value |
| reverseCounterButtons | boolean | false | reverse the counter buttons |
| increaseButtonBackgroundColor | string | #0b349a | change the CounterInput's active increase button background color |
| decreaseButtonBackgroundColor | string | #0b349a | change the CounterInput's active decrease button background color |
| ImageComponent | component | Image | set your own Image component instead of default `RN Image` component such as; `FastImage` |
## Future Plans
- [x] ~~LICENSE~~
- [x] ~~Horizontal Feature~~
- [ ] Animation
- [x] ~~Reverse Horizontal +/- Buttons Option~~
- [ ] Write an article about the lib on Medium
## Credits
Heavily Inspired by [Enes Kargıcı](https://dribbble.com/shots/6530185-Beats-Mobile-App-Concept-Design), thank you so much!
## Author
FreakyCoder, [email protected]
## License
React Native Counter Input is available under the MIT license. See the LICENSE file for more info.