marcocesarato/react-native-input-spinner marcocesarato/react-native-input-spinner

  • Stars
    star
    386
  • Rank 111,213 (Top 3 %)
  • Language
    JavaScript
  • License
    GNU General Publi...
  • Created over 5 years ago
  • Updated 9 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
marcocesarato/react-native-input-spinner
github

marcocesarato

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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.

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.


More Repositories

1

PHP-Antimalware-Scanner

AMWScan (PHP Antimalware Scanner) is a free tool to scan php files and analyze your project to find any malicious code inside it.
PHP
557
star
2

react-native-big-list

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.
JavaScript
520
star
3

php-conventional-changelog

A PHP tool built to generate a changelog from a project's commit messages and metadata following the conventionalcommits.org and automate versioning with semver.org.
PHP
217
star
4

Database-Web-API

Dynamically generate RESTful APIs from the contents of a database table. Provides JSON, XML, and HTML. Supports most popular databases
PHP
42
star
5

PHP-AIO-Security

The objective of this class is offer an automatic system of protection for developers's projects and simplify some security operations as the check of CSRF or XSS all in a simple class. Infact you could just call the main method to have better security yet without too much complicated operations.
PHP
37
star
6

dotenv-mono

This package permit to have a centralized dotenv on a monorepo. It also includes some extra features such as manipulation and saving of changes to the dotenv file, a default centralized file, and a file loader with ordering and priorities.
TypeScript
35
star
7

PHP-Light-SQL-Parser

This class can parse SQL to get query type, tables, field values, etc.. It takes an string with a SQL statements and parses it to extract its different components. Currently the class can extract the SQL query method, the names of the tables involved in the query and the field values that are passed as parameters. This parser is pretty light respect phpsqlparser or others php sql parser.
PHP
28
star
8

PHP-Malware-Collection

Collection of php malware/backdoors/shell
PHP
27
star
9

react-native-input-validator

This library validates strings and number passed on TextInput component and highlight the result (valid green, invalid red). Optionally can have a placeholder with floating labels.
JavaScript
14
star
10

PHP-Markdown-Docs

This package can convert PHPDoc comments from classes into Markdown. It can parse a class file with a given file name and extracts the documentation of its functions and variables that it may contain in PHPDoc format. The package can convert the extracted documentation into a file in Markdown format.
PHP
14
star
11

PHP-Minifier

This class can minify HTML, JavaScript and CSS to take less space. It can take a string with either HTML, JavaScript or CSS, and parses it to eliminate unnecessary text. The class returns as result a a string that is smaller than the original.
PHP
12
star
12

Shell-BotKiller

We'll post findings from an infected confluence-systems we investigated recently, to show how it looks/feel like. the most systems we took a look at were infected with mining-bots like kerberods.
Shell
4
star
13

PHP-CPDO

This package can retrieve PDO query results from cache variables. It extends the base PDO class and override some functions to handle database query execution and store the query results in variables. The class can also return query results for cached queries for previously executed queries to retrieve the results faster for repeated queries.
PHP
4
star
14

marcocesarato

2
star
15

react-native-big-list-docs

HTML
1
star