{"id":11632,"library":"rc-input-number","title":"React Input Number Component","description":"This package provides a foundational and unstyled React component for handling numeric input. It includes built-in increment and decrement controls, making it suitable for building custom number input experiences. The current stable version, under its new scope, is `@rc-component/input-number@1.6.2`. Historically, it was known as `rc-input-number` before being renamed to the scoped package in version 1.5.0. The project maintains an active release cadence, with frequent patch and minor updates, indicating ongoing development and improvements. Its primary differentiator is its low-level, highly customizable nature, providing core functionality without imposing specific UI/UX styles, which allows other UI libraries (like Ant Design) to build upon it, rather than being a full-featured, opinionated component itself.","status":"renamed","version":"9.5.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/input-number","tags":["javascript","react","react-component","react-input-number","input-number","typescript"],"install":[{"cmd":"npm install rc-input-number","lang":"bash","label":"npm"},{"cmd":"yarn add rc-input-number","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-input-number","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The package was renamed from `rc-input-number` to `@rc-component/input-number` in version 1.5.0. Always use the new scoped package name for modern usage.","wrong":"import InputNumber from 'rc-input-number';","symbol":"InputNumber","correct":"import InputNumber from '@rc-component/input-number';"},{"note":"For CommonJS environments, ensure you access the `.default` property for the main component export, as it's typically an ESM default export.","wrong":"const InputNumber = require('@rc-component/input-number');","symbol":"InputNumber (CommonJS)","correct":"const InputNumber = require('@rc-component/input-number').default;"},{"note":"Type imports should also use the new scoped package name `@rc-component/input-number`.","wrong":"import { InputNumberProps } from 'rc-input-number';","symbol":"InputNumberProps (TypeScript type)","correct":"import type { InputNumberProps } from '@rc-component/input-number';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport InputNumber from '@rc-component/input-number';\n\n// Basic CSS for visibility (you would typically integrate with your design system)\nconst inputNumberStyles = {\n  width: 120,\n  padding: 8,\n  borderRadius: 4,\n  border: '1px solid #ccc',\n  fontSize: 16\n};\n\nexport default function MyInputNumber() {\n  const [value, setValue] = useState(10);\n\n  const onChange = (newValue: number | null) => {\n    console.log('Value changed:', newValue);\n    // The component can return null for empty input, handle as needed\n    setValue(newValue === null ? 0 : newValue);\n  };\n\n  return (\n    <div>\n      <h3>Basic InputNumber Example</h3>\n      <InputNumber\n        min={0}\n        max={100}\n        step={1}\n        defaultValue={10}\n        value={value}\n        onChange={onChange}\n        placeholder=\"Enter a number\"\n        style={inputNumberStyles}\n        // Use prefixCls for targeted CSS customization\n        prefixCls=\"my-custom-input-number\"\n      />\n      <p>Current Value: {value}</p>\n      <button onClick={() => setValue(value + 5)}>Increment by 5</button>\n      <p>This component is unstyled and requires custom CSS for visual appearance.</p>\n    </div>\n  );\n}","lang":"typescript","description":"Demonstrates a basic controlled `InputNumber` component with min/max, step, and change handling, highlighting its unstyled nature that requires custom CSS for presentation."},"warnings":[{"fix":"Update all `import` and `require` statements in your codebase from `'rc-input-number'` to `'@rc-component/input-number'`, and update your `package.json` dependencies.","message":"The package name was changed from `rc-input-number` to `@rc-component/input-number` in version 1.5.0. All imports must be updated.","severity":"breaking","affected_versions":">=1.5.0 (for @rc-component/input-number) or all versions of the old `rc-input-number` when migrating."},{"fix":"Replace any usage of the `type` prop with `mode` in your `InputNumber` component usage.","message":"The `type` prop was renamed to `mode` at `@rc-component/input-number@1.5.0`. This is a breaking API change if you were using the `type` prop.","severity":"breaking","affected_versions":">=1.5.0"},{"fix":"Review your usage of the component, especially if you have custom styling based on its internal structure or complex event listeners. Test thoroughly after upgrading.","message":"The component underwent a semantic refactor at `@rc-component/input-number@1.6.0`, which might introduce subtle behavioral changes or require adjustments if relying on internal DOM structure or specific event handling previously.","severity":"breaking","affected_versions":">=1.6.0"},{"fix":"Provide custom CSS for the `InputNumber` component, leveraging the `prefixCls` prop (default `rc-input-number` or custom) for scoped styling. Consider using a UI library that wraps this component for pre-built styles.","message":"The `InputNumber` component is unstyled by default. Consumers are responsible for providing their own CSS or styling solutions to make it visually appealing and functional within their application's design system.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import InputNumber from 'rc-input-number';` to `import InputNumber from '@rc-component/input-number';` and update your `package.json`.","cause":"Attempting to import the component using its old package name after the rename to `@rc-component/input-number`.","error":"Module not found: Can't resolve 'rc-input-number'"},{"fix":"Rename the prop from `type` to `mode` in your `InputNumber` component usage.","cause":"Using the deprecated `type` prop instead of the `mode` prop on `InputNumber` after upgrading to `@rc-component/input-number@1.5.0` or later.","error":"Property 'type' does not exist on type 'InputNumberProps'. Did you mean 'mode'?"}],"ecosystem":"npm"}