Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rc-input-number

Package Overview
Dependencies
Maintainers
0
Versions
218
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-input-number

React input-number component

  • 9.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.5M
increased by6.12%
Maintainers
0
Weekly downloads
 
Created

What is rc-input-number?

The rc-input-number package is a React component that provides an input field specifically designed for numeric values. It allows users to input numbers either by typing them directly or by using increment and decrement buttons. This package offers features such as precision control, keyboard navigation, and customizable styles.

What are rc-input-number's main functionalities?

Basic Numeric Input

This code sample demonstrates how to create a basic numeric input field with a default value, minimum, and maximum value.

import InputNumber from 'rc-input-number';

function App() {
  return (
    <InputNumber
      defaultValue={3}
      min={1}
      max={10}
    />
  );
}

Precision Control

This code sample shows how to set the step and precision for the numeric input, allowing users to increment or decrement by a specific value and control the number of digits after the decimal point.

import InputNumber from 'rc-input-number';

function App() {
  return (
    <InputNumber
      defaultValue={3.5}
      step={0.1}
      precision={2}
    />
  );
}

Keyboard Navigation

This code sample illustrates how to handle keyboard events, enabling users to navigate and modify the input value using their keyboard.

import InputNumber from 'rc-input-number';

function App() {
  return (
    <InputNumber
      defaultValue={3}
      onKeyDown={(e) => console.log('KeyDown', e)}
    />
  );
}

Custom Styles

This code sample demonstrates how to apply custom styles to the numeric input component to match the design requirements of your application.

import InputNumber from 'rc-input-number';

function App() {
  return (
    <InputNumber
      defaultValue={3}
      style={{ width: 100 }}
    />
  );
}

Other packages similar to rc-input-number

Keywords

FAQs

Package last updated on 01 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc