React Checkbox Component

Common errors

• TypeError: (0 , _rc_checkbox__WEBPACK_IMPORTED_MODULE_0__.default) is not a function

  cause Attempting to import `Checkbox` as a named export when it is a default export.
  fix Change your import statement from `import { Checkbox } from 'rc-checkbox';` to `import Checkbox from 'rc-checkbox';`.

• Property 'someProp' does not exist on type 'IntrinsicAttributes & CheckboxProps'.

  cause Using a prop that either does not exist on `CheckboxProps` or was removed/renamed during the v3.0.0 TypeScript rewrite.
  fix Consult the `rc-checkbox` (or `@rc-component/checkbox`) API documentation to verify valid props. If you're on v3.0.0+, ensure your code adheres to the new TypeScript interfaces.

• Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

  cause This error often indicates that the component `Checkbox` was not correctly imported or resolved, resulting in `undefined` being passed where a React component was expected.
  fix Verify that `import Checkbox from 'rc-checkbox';` is correctly placed and that `rc-checkbox` is properly installed in your `node_modules`.

Warnings

• breaking `rc-checkbox` v3.0.0 introduced a full rewrite in TypeScript. This may lead to changes in prop interfaces, internal component behavior, and requires TypeScript users to update their type imports and usage.
  Fix: Review the component's API documentation for updated prop types and usage patterns. Ensure your TypeScript setup correctly resolves the new type definitions.
• breaking In `rc-checkbox` v3.5.0, a previously introduced accessibility improvement (feat: improve a11y #292) was reverted. This might impact users relying on those specific accessibility enhancements, potentially causing regressions in assistive technology support or keyboard navigation.
  Fix: If accessibility is critical, review the specific a11y features that were reverted and consider implementing alternative solutions or custom a11y attributes until the feature is re-introduced or improved in the successor package.
• gotcha The `rc-checkbox` package is functionally superseded by `@rc-component/checkbox`. While `rc-checkbox@3.5.0` is the last version under this name, all future development, breaking changes (e.g., DOM structure changes in `@rc-component/checkbox@2.0.0`), and new features will occur in the `@rc-component/checkbox` package. Users are strongly encouraged to migrate.
  Fix: Update your package dependencies from `rc-checkbox` to `@rc-component/checkbox`. Review the changelog for `@rc-component/checkbox` for any breaking changes introduced since `rc-checkbox@3.5.0` (e.g., DOM structure changes in `@rc-component/checkbox@2.0.0` requiring style adjustments).

Install

• npm install rc-checkbox npm
• yarn add rc-checkbox yarn
• pnpm add rc-checkbox pnpm

Imports

• Checkbox
  wrong:

  import { Checkbox } from 'rc-checkbox';

  correct:

  import Checkbox from 'rc-checkbox';

  The component is exported as a default export, requiring direct import without curly braces.
• CheckboxProps

  import type { CheckboxProps } from 'rc-checkbox';

  Type definitions are provided for TypeScript users. Use `import type` to avoid bundling unnecessary runtime code.
• Checkbox (CommonJS)

  const Checkbox = require('rc-checkbox');

  For CommonJS environments, the component is imported via `require`.

Quickstart

This quickstart demonstrates how to import and use the `rc-checkbox` component, managing its checked state and handling changes. It also shows examples of disabled checkboxes and the necessary CSS import.

import React, { useState } from 'react';
import Checkbox from 'rc-checkbox';
import 'rc-checkbox/assets/index.css'; // Don't forget to import the default styles if needed

const MyCheckboxComponent = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (e) => {
    setIsChecked(e.target.checked);
    console.log('Checkbox changed:', e.target.checked);
  };

  return (
    <div>
      <label>
        <Checkbox
          checked={isChecked}
          onChange={handleChange}
          name="myAwesomeCheckbox"
          id="my-awesome-checkbox"
        />
        <span>{isChecked ? 'Checked' : 'Unchecked'}</span>
      </label>
      <br />
      <label>
        <Checkbox defaultChecked disabled />
        <span>Disabled and Checked</span>
      </label>
      <br />
      <label>
        <Checkbox disabled />
        <span>Disabled and Unchecked</span>
      </label>
    </div>
  );
};

export default MyCheckboxComponent;