rc-segmented

library2.7.1jsnpmunverified

rc-segmented is a foundational React component for building highly customizable segmented controls, extensively utilized within the Ant Design ecosystem. It presents choices as a group of buttons where typically only one can be active at a time, akin to a radio group. The component supports various data types for options (strings, numbers, or objects), robust `onChange` event handling, and manages selection state. Currently stable at version `2.7.1`, the package maintains a moderate release cadence, focusing on bug fixes, performance enhancements, and crucial accessibility improvements. While `rc-segmented` is the primary package, a newer scoped version, `@rc-component/segmented`, sometimes receives parallel updates, which can be a point of confusion for developers. Key differentiators include its deep integration with Ant Design's principles, a strong emphasis on accessibility, and a clear, functional API for managing segmented choices efficiently within React applications.

web-framework

npm install rc-segmented

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RC-SEGMENTED

rc-segmented

web-frameworkjavascriptv2.7.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Segmented

✓ import Segmented from 'rc-segmented';

✗ import { Segmented } from 'rc-segmented';

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

Styles

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

✗ import 'rc-segmented/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.

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."); }

Debug

Known issues

breakingThe `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).

affects: >=2.0.0

gotchaThe 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.

affects: >=1.0.0

gotchaThere 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.

affects: >=1.0.0

gotchaOlder 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.

affects: <2.7.1

Errors

Common errors & fixes

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

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.

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.

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']} />`.

Upgrade

Version history

2.7.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for any React component.

react-domrequiredPeer dependency required for rendering React components.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/segmented ↗

packagehttps://www.npmjs.com/package/rc-segmented ↗

homepagehttps://react-component.github.io/segmented ↗