{"library":"rc-segmented","title":"React Segmented Controls","description":"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install rc-segmented"],"cli":null},"imports":["import Segmented from 'rc-segmented';","import 'rc-segmented/assets/index.css';","import type { SegmentedOption } from 'rc-segmented';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import Segmented from 'rc-segmented';\nimport 'rc-segmented/assets/index.css';\nimport React, { useState } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nconst App = () => {\n  const [value, setValue] = useState('Antd');\n\n  const handleValueChange = (newValue: string | number) => {\n    console.log('Selected value:', newValue);\n    setValue(newValue);\n  };\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>rc-segmented Demo</h1>\n      <Segmented\n        options={['Antd', 'Antv', 'Egg.js', { label: 'Pro', value: 'Pro', disabled: true } ]}\n        value={value}\n        onChange={handleValueChange}\n      />\n      <p>Currently selected: {value}</p>\n    </div>\n  );\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 with ID 'root' not found. Please ensure an element with id='root' exists in your HTML.\");\n}","lang":"typescript","description":"This quickstart demonstrates a basic segmented control with state management, custom options, and event handling using modern React hooks and `createRoot`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}