React Input Number Component

Common errors

• Module not found: Can't resolve 'rc-input-number'

  cause Attempting to import the component using its old package name after the rename to `@rc-component/input-number`.
  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`.

• Property 'type' does not exist on type 'InputNumberProps'. Did you mean 'mode'?

  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.
  fix Rename the prop from `type` to `mode` in your `InputNumber` component usage.

Warnings

• breaking The package name was changed from `rc-input-number` to `@rc-component/input-number` in version 1.5.0. All imports must be updated.
  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.
• breaking 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.
  Fix: Replace any usage of the `type` prop with `mode` in your `InputNumber` component usage.
• breaking 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.
  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.
• gotcha 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.
  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.

Install

• npm install rc-input-number npm
• yarn add rc-input-number yarn
• pnpm add rc-input-number pnpm

Imports

• InputNumber
  wrong:

  import InputNumber from 'rc-input-number';

  correct:

  import InputNumber from '@rc-component/input-number';

  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.
• InputNumber (CommonJS)
  wrong:

  const InputNumber = require('@rc-component/input-number');

  correct:

  const InputNumber = require('@rc-component/input-number').default;

  For CommonJS environments, ensure you access the `.default` property for the main component export, as it's typically an ESM default export.
• InputNumberProps (TypeScript type)
  wrong:

  import { InputNumberProps } from 'rc-input-number';

  correct:

  import type { InputNumberProps } from '@rc-component/input-number';

  Type imports should also use the new scoped package name `@rc-component/input-number`.

Quickstart

Demonstrates a basic controlled `InputNumber` component with min/max, step, and change handling, highlighting its unstyled nature that requires custom CSS for presentation.

import React, { useState } from 'react';
import InputNumber from '@rc-component/input-number';

// Basic CSS for visibility (you would typically integrate with your design system)
const inputNumberStyles = {
  width: 120,
  padding: 8,
  borderRadius: 4,
  border: '1px solid #ccc',
  fontSize: 16
};

export default function MyInputNumber() {
  const [value, setValue] = useState(10);

  const onChange = (newValue: number | null) => {
    console.log('Value changed:', newValue);
    // The component can return null for empty input, handle as needed
    setValue(newValue === null ? 0 : newValue);
  };

  return (
    <div>
      <h3>Basic InputNumber Example</h3>
      <InputNumber
        min={0}
        max={100}
        step={1}
        defaultValue={10}
        value={value}
        onChange={onChange}
        placeholder="Enter a number"
        style={inputNumberStyles}
        // Use prefixCls for targeted CSS customization
        prefixCls="my-custom-input-number"
      />
      <p>Current Value: {value}</p>
      <button onClick={() => setValue(value + 5)}>Increment by 5</button>
      <p>This component is unstyled and requires custom CSS for visual appearance.</p>
    </div>
  );
}