Skip to content

An extensible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.

License

Notifications You must be signed in to change notification settings

marcocesarato/react-native-input-spinner

Repository files navigation

If this project has helped you out, please support us with a star 🌟


NPM version Package Quality js-prittier-style Compatibility

📘 Description

Author: Marco Cesarato

Github: https://github.com/marcocesarato/react-native-input-spinner

An extendible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.

Try it on the published demo web app: https://marcocesarato.github.io/react-native-input-spinner/

Compatible with: Android, iOS, Windows, Web and Expo.

📖 Install

Install the library from npm or yarn just running one of the following command lines:

npm yarn
npm install react-native-input-spinner --save yarn add react-native-input-spinner

NPM

💻 Usage

import InputSpinner from "react-native-input-spinner";

// Example
<InputSpinner
	max={10}
	min={2}
	step={2}
	colorMax={"#f04048"}
	colorMin={"#40c5f4"}
	value={this.state.number}
	onChange={(num) => {
		console.log(num);
	}}
/>;

For more examples check the Example directory the App.js file

🎨 Screenshots

Default props + Min & Max colors Not rounded, showBorder, Min & Max colors

High customization

Skins Customization

⚡️ Example

Web

https://marcocesarato.github.io/react-native-input-spinner/

Expo

Clone or download repo and after:

cd Example
yarn install # or npm install
expo start

Open Expo Client on your device. Use it to scan the QR code printed by expo start. You may have to wait a minute while your project bundles and loads for the first time.

Example App Screenshot

💡 Props

Check the "Props List" file to have the complete list of component props ordered by name.

Structure

Handlers

Handler Description Func
onBlur Callback that is called when the text input is blurred. (e) => { ... }
onChange Callback that is called when the number of the Spinner change. (num) => { ... }
onDecrease Callback that is called when decrease button is clicked get value decreased. (decreased) => { ... }
onFocus Callback that is called when the text input is focused. (e) => { ... }
onIncrease Callback that is called when increase button is clicked get value increased . (increased) => { ... }
onKeyPress Callback that is called when a key is pressed. (e) => { ... }
onLongPress Callback that is called when holding the right or the left button Function
onMax Callback that is called when max is reached get max number permitted. (max) => { ... }
onMin Callback that is called when min is reached get min number permitted. (min) => { ... }
onSubmitEditing Callback that is called when the text input's submit button is pressed (e) => { ... }

Props

Property Description Type Default Note
accelerationDelay Delay time before start the onLongPress event and increase or decrease and continually Number 1000
append Custom element before right button Component
autoFocus If true, focuses the input on componentDidMount. false
continuity On min value is reached next decrease value will be the max value, if max is reached next increase value will be the min value Boolean false
disabled Disable the Spinner or not Boolean false
editable Set if input number field is editable or not Boolean true
emptied Set if input can be empty Boolean false
initialValue Initial value of the Spinner String
Number
0
inputProps Customized TextInput Component props Object null Could overwrite other props
leftButtonProps Customized left button (Touchable Component) props Object null Could overwrite other props
maxLength Limits the maximum number of characters that can be entered. Number
max Max number permitted String
Number
null
min Min value permitted String
Number
0
placeholder The string that will be rendered when text input value is equal to zero String null
placeholderTextColor The text color of the placeholder string. String null
precision Max numbers permitted after comma Integer 2
prepend Custom element after left button Component
returnKeyLabel Sets the return key to the label. Use it instead of returnKeyType. String
returnKeyType Determines how the return key should look. On Android you can also use returnKeyLabel String
rightButtonProps Customized right button (Touchable Component) props Object null Could overwrite other props
selectTextOnFocus If true, all text will automatically be selected on focus. Bool false
selectionColor The highlight and cursor color of the text input. String null
step Value to increment or decrement the current spinner value String
Number
1
longStep Value to increment or decrement the current spinner value onLongPress String
Number
step
speed Speed acceleration ratio of increase or decrease onLongPress Number 7 (value from 1 to 10)
buttonTextProps Customized text button props Object null
typingTime Time before debounce and trigger onChange event Number 750
type Type of spinner String int Can be int or real/float...
value Controlled value of the Spinner String
Number
0
formatter An optional function that is called to format the value for display Function null Should return a string. editable must be false.

Screenshots

Description
  • Top spinner with a child
  • Bottom spinner with prepend and append

Props Styles

Property Description Type Default Note
buttonPressStyle Button style on Pressed state Object Could overwrite other props
buttonStyle Button style Object Could overwrite other props
inputStyle Text Input style Object Could overwrite other props
skin Skin layout String clean, modern, paper, round, square
style Container style Object Could overwrite other props

Props Colors

Property Description Type Default Note
background Custom input text background color String transparent
buttonPressTextColor Custom color of the button of the Spinner on Pressed state String Auto
buttonTextColor Custom color of the label's button of the Spinner String Auto
colorAsBackground Use color as background Bool false
colorLeft Custom color of the Spinner left button String #3E525F
colorMax Custom color of the Spinner when reach max value String
colorMin Custom color of the Spinner when reach min value String
colorPress Custom color of the Spinner button on touch press String #3E525F
colorRight Custom color of the Spinner right button String #3E525F
color Custom color of the Spinner String #3E525F
textColor Custom input text number color String Auto

Screenshots

Description
  • Spinner with color, buttonTextColor, colorPress and buttonPressTextColor custom colors

Props Container Style

Property Description Type Default Note
height Custom height of the Spinner Number 50
shadow Show container shadow Boolean false Use with background like background={"#FFF"}
showBorder Show the border of the Spinner or not Boolean false Use with rounded={false}
style Container style Object Could overwrite other props
width Custom width of the Spinner Number 150

Props Buttons Style

Property Description Type Default Note
activeOpacity Opacity of underlay on pressed button Number 0.85
arrows Labels on button will be (< and >) instead of (+ and -) Boolean false
buttonFontFamily Custom fontFamily of buttons of the Spinner String System Default
buttonFontSize Custom fontSize of buttons of the Spinner Number 14
buttonLeftDisabled Disable left button Boolean false
buttonLeftImage Custom element on the button left of the spinner Component Could overwrite other props
buttonLeftText Custom text on the button left of the spinner String
buttonPressLeftImage Custom element on the button left of the spinner on pressed state Component Could overwrite other props
buttonPressRightImage Custom element on the button right of the spinner on pressed state Component Could overwrite other props
buttonPressStyle Button Style on Pressed state (Plus and Minus buttons) Object
buttonPressTextColor Custom color of the button of the Spinner on Pressed state String #FFFFFF
buttonRightDisabled Disable right button Boolean false
buttonRightImage Custom element on the button right of the spinner Component Could overwrite other props
buttonRightText Custom text on the button right of the spinner String
buttonStyle Button Style (Plus and Minus buttons) Object
buttonTextColor Custom color of the labels's button of the Spinner String #FFFFFF
buttonPressTextStyle Button Style on Pressed state (Plus and Minus buttons) Object Could overwrite other props
buttonTextStyle Button text Style state (Plus and Minus buttons) Object Could overwrite other props
rounded Use circular button Boolean true

Props Text Input Style

Property Description Type Default Note
background Custom input text background color String transparent
fontFamily Custom fontFamily of the text input of the Spinner String System Default
fontSize Custom fontSize of the text input of the Spinner Number 14
inputStyle Text Input style Object Can overwrite other props
textColor Custom input text number color String #000000

🤔 How to contribute

Have an idea? Found a bug? Please raise to ISSUES. Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.