2.0.2 • Published 12 months ago

react-native-counter-input v2.0.2

Weekly downloads
9
License
MIT
Repository
github
Last release
12 months ago

Counter Input with fully customizable options for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

Installation

Add the dependency:

npm i react-native-counter-input

Peer Dependencies

"@freakycoder/react-native-bounceable": ">= 0.1.1",

Usage

Import

import CounterInput from "react-native-counter-input";

Fundamental Usage

<CounterInput
  onChange={(counter) => {
    console.log("onChange Counter:", counter);
  }}
/>

Configuration - Props

PropertyTypeDefaultDescription
stylestyledefaultchange/override the main container style
horizontalbooleanfalsemake the button horizontal design
initialnumber0set the initial value for the counter input
onChangefunctionundefinedset your own logic for onChange method, it triggers on any change
onChangeTextfunctionundefinedit triggers when the TextInput changes
onIncreasePressfunctionundefinedit triggers when the increase button is pressed
onDecreasePressfunctionundefinedit triggers when the decrease button is pressed
backgroundColorstring#fffchange the CounterInput's background color
minnumberundefinedset a minimum input value
maxnumberundefinedset a maximum input value
reverseCounterButtonsbooleanfalsereverse the counter buttons
increaseButtonBackgroundColorstring#0b349achange the CounterInput's active increase button background color
decreaseButtonBackgroundColorstring#0b349achange the CounterInput's active decrease button background color
ImageComponentcomponentImageset your own Image component instead of default RN Image component such as; FastImage

Future Plans

  • LICENSE
  • Horizontal Feature
  • Animation
  • Reverse Horizontal +/- Buttons Option
  • Write an article about the lib on Medium

Credits

Heavily Inspired by Enes Kargıcı, thank you so much!

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Counter Input is available under the MIT license. See the LICENSE file for more info.