{"id":11633,"library":"rc-input","title":"React Component Input","description":"rc-input is a foundational, unstyled React input component, designed to be highly customizable and often used as a building block for UI libraries like Ant Design. It provides core input functionalities, including features like clearable input. The current stable version is 1.8.0. It receives regular maintenance updates, though a strict release cadence isn't published. A key differentiator is its low-level nature, focusing purely on input logic without opinionated styling, making it highly adaptable. It provides full TypeScript support and manages common input behaviors such as value synchronization and focus handling. The package has a somewhat convoluted naming history, which developers should be aware of.","status":"active","version":"1.8.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/input","tags":["javascript","react","react-component","react-input","input","antd","ant-design","typescript"],"install":[{"cmd":"npm install rc-input","lang":"bash","label":"npm"},{"cmd":"yarn add rc-input","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-input","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component functionality.","package":"react","optional":false},{"reason":"Peer dependency for React component rendering.","package":"react-dom","optional":false}],"imports":[{"note":"The primary Input component is exported as a default export.","wrong":"import { Input } from 'rc-input';","symbol":"Input","correct":"import Input from 'rc-input';"},{"note":"Following a refactor, textarea functionality is often accessed via a static property on the default Input component, not as a separate named export.","wrong":"import { TextArea } from 'rc-input';","symbol":"Input.TextArea","correct":"import Input from 'rc-input';\n// ...\n<Input.TextArea />"},{"note":"For CommonJS environments, the default export is accessed via the `.default` property.","wrong":"const Input = require('rc-input');","symbol":"CommonJS require","correct":"const Input = require('rc-input').default;"}],"quickstart":{"code":"import Input from 'rc-input';\nimport { createRoot } from 'react-dom/client';\n\nconst App = () => (\n  <div>\n    <Input placeholder=\"Basic input\" allowClear />\n    <br />\n    <Input.TextArea placeholder=\"Textarea input\" rows={4} />\n    <br />\n    <Input value=\"Readonly input\" readOnly />\n  </div>\n);\n\nconst mountNode = document.getElementById('root');\nif (mountNode) {\n  const root = createRoot(mountNode);\n  root.render(<App />);\n} else {\n  console.error('Mount node not found!');\n}","lang":"typescript","description":"This example demonstrates basic usage of the Input component, including a clearable input, a textarea, and a readonly input."},"warnings":[{"fix":"Ensure you `npm install rc-input` and update all `import` or `require` statements to reference `rc-input` instead of `@rc-component/input`.","message":"The package underwent a confusing naming change attempt. At one point, the project intended to rename from `rc-input` to `@rc-component/input`. While a separate `@rc-component/input` package exists with its own `1.x` release line, the original `rc-input` package has continued independent development and is now at a higher version (e.g., 1.8.0 vs. 1.3.0 for `@rc-component/input`). Developers should strictly use `rc-input` for the actively maintained version.","severity":"breaking","affected_versions":"All versions where confusion exists (broadly since `@rc-component/input@1.2.0`)"},{"fix":"Migrate usage from `rc-textarea` or old textarea patterns to use `Input.TextArea` or equivalent functionality exposed by `rc-input`.","message":"Textarea functionality, previously potentially handled by a separate `rc-textarea` package or distinct component, was merged into `rc-input` (noted in `@rc-component/input@1.3.0`, which should apply to the `rc-input` line as well). This change consolidates input and textarea logic. Users of `rc-textarea` or specific textarea APIs should review the `rc-input` documentation for the new recommended way to implement text areas.","severity":"breaking","affected_versions":"Potentially `>=1.3.0` for `@rc-component/input` and likely `rc-input` versions incorporating this refactor (implied `v1.8.0`)."},{"fix":"Always verify package details directly on npmjs.com/package/rc-input for accurate information.","message":"The README contains incorrect NPM links pointing to `rc-select` instead of `rc-input` for bundle size and download stats. This is a documentation error and does not affect package functionality, but can be misleading when checking package popularity or size.","severity":"gotcha","affected_versions":"All versions, as it's a documentation issue."}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statements from `import ... from '@rc-component/input'` to `import ... from 'rc-input'`.","cause":"Attempting to import from `@rc-component/input` when the actively maintained and installed package is `rc-input`.","error":"Module not found: Can't resolve '@rc-component/input'"},{"fix":"Access the default export correctly: `const Input = require('rc-input').default;`","cause":"Attempting to use `require('rc-input')` directly as a function in CommonJS, when `rc-input` exports its main component as a default export.","error":"TypeError: (0, _rc_input.default) is not a function"},{"fix":"Ensure `import Input from 'rc-input';` is correctly placed and that your `rc-input` version supports the `Input.TextArea` static component. If it doesn't, you might need to use a separate `rc-textarea` package or upgrade `rc-input`.","cause":"Attempting to use `Input.TextArea` without `Input` being correctly imported or when the installed version of `rc-input` does not expose `TextArea` in this manner.","error":"TypeError: Cannot read properties of undefined (reading 'TextArea')"}],"ecosystem":"npm"}