React Segmented Controls

Common errors

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

  cause Incorrect import of the Segmented component; it is a default export.
  fix Change `import { Segmented } from 'rc-segmented';` to `import Segmented from 'rc-segmented';`

• Module not found: Error: Can't resolve 'rc-segmented/assets/index.css' in '...' or similar CSS loading errors.

  cause The CSS stylesheet for the component was not found or incorrectly imported.
  fix Ensure `import 'rc-segmented/assets/index.css';` is present in your application's entry point or component, and your build tool (e.g., Webpack, Vite) is configured to handle CSS imports.

• TypeError: Cannot read properties of undefined (reading 'map') or 'options' prop is not an array.

  cause The `options` prop provided to the `Segmented` component is either missing or not a valid array.
  fix Ensure the `options` prop is always an array, for example: `<Segmented options={['Option 1', 'Option 2']} />`.

Warnings

• breaking The `onChange` API changed significantly in versions `v2.0.0+`. Ensure your callback signature matches the new `(value: string | number) => void` type, as it now receives only the selected value.
  Fix: Update your `onChange` handler to accept a single argument representing the selected `value` (string | number).
• gotcha The component requires explicit CSS imports for styling. If the component appears unstyled, you likely forgot to import `rc-segmented/assets/index.css`.
  Fix: Add `import 'rc-segmented/assets/index.css';` to your entry file or component where `rc-segmented` is used.
• gotcha There exist two related packages, `rc-segmented` and `@rc-component/segmented`, which receive similar updates. Ensure you are consistently using the intended package, as mixing them or using the wrong one could lead to unexpected behavior or versioning conflicts.
  Fix: Verify your `package.json` and import statements refer to the correct package (`rc-segmented` or `@rc-component/segmented`) to maintain consistency.
• gotcha Older versions of `rc-segmented` (prior to `v2.7.1`) may have had accessibility shortcomings, particularly concerning keyboard navigation and ARIA attributes. These issues have been progressively addressed in recent updates.
  Fix: Upgrade to the latest stable version of `rc-segmented` to benefit from improved accessibility features and compliance.

Install

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

Imports

• Segmented
  wrong:

  import { Segmented } from 'rc-segmented';

  correct:

  import Segmented from 'rc-segmented';

  The main Segmented component is a default export. Ensure you import it without curly braces.
• Styles
  wrong:

  import 'rc-segmented/index.css';

  correct:

  import 'rc-segmented/assets/index.css';

  Component styles are provided via a separate CSS file. Ensure your build system handles CSS imports. A Less version (`index.less`) is also available but requires a Less preprocessor.
• SegmentedOption (Type)

  import type { SegmentedOption } from 'rc-segmented';

  Import the `SegmentedOption` type if you are dynamically generating options or need type safety for your option objects.

Quickstart

This quickstart demonstrates a basic segmented control with state management, custom options, and event handling using modern React hooks and `createRoot`.

import Segmented from 'rc-segmented';
import 'rc-segmented/assets/index.css';
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

const App = () => {
  const [value, setValue] = useState('Antd');

  const handleValueChange = (newValue: string | number) => {
    console.log('Selected value:', newValue);
    setValue(newValue);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>rc-segmented Demo</h1>
      <Segmented
        options={['Antd', 'Antv', 'Egg.js', { label: 'Pro', value: 'Pro', disabled: true } ]}
        value={value}
        onChange={handleValueChange}
      />
      <p>Currently selected: {value}</p>
    </div>
  );
};

const mountNode = document.getElementById('root');
if (mountNode) {
  const root = createRoot(mountNode);
  root.render(<App />);
} else {
  console.error("Mount node with ID 'root' not found. Please ensure an element with id='root' exists in your HTML.");
}