{"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.","language":"javascript","status":"renamed","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-input-number"],"cli":null},"imports":["import InputNumber from '@rc-component/input-number';","const InputNumber = require('@rc-component/input-number').default;","import type { InputNumberProps } from '@rc-component/input-number';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}