npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@spring-global/react-native-input-spinner

v1.7.16

Published

React native numeric spinner fork from https://www.npmjs.com/package/react-native-input-spinner

Downloads

11

Readme

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 | 750 | | | 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 | StringNumber | 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 | StringNumber | null | | | min | Min value permitted | StringNumber | 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 | StringNumber | 1 | | | longStep | Value to increment or decrement the current spinner value onLongPress | StringNumber | step | | | speed | Speed acceleration ratio of increase or decrease onLongPress | Number | 7 | (value from 1 to 10) | | 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 | StringNumber | 0 | |

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.