https://github.com/react-component/segmented
React Segmented Controls
https://github.com/react-component/segmented
reactjs segmented segmented-controls
Last synced: 9 months ago
JSON representation
React Segmented Controls
- Host: GitHub
- URL: https://github.com/react-component/segmented
- Owner: react-component
- License: mit
- Created: 2022-01-24T04:11:22.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2025-01-24T09:54:46.000Z (11 months ago)
- Last Synced: 2025-03-28T07:08:56.680Z (9 months ago)
- Topics: reactjs, segmented, segmented-controls
- Language: TypeScript
- Homepage: https://react-component.github.io/segmented/
- Size: 2.56 MB
- Stars: 12
- Watchers: 5
- Forks: 24
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# rc-segmented
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
[npm-image]: http://img.shields.io/npm/v/rc-segmented.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-segmented
[github-actions-image]: https://github.com/react-component/segmented/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/segmented/actions
[codecov-image]: https://codecov.io/gh/react-component/segmented/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/react-component/segmented/branch/master
[download-image]: https://img.shields.io/npm/dm/rc-segmented.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-segmented
[bundlephobia-url]: https://bundlephobia.com/package/rc-segmented
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-segmented
React Segmented Control.
## Live Demo
https://react-component.github.io/segmented/
## Install
[](https://npmjs.org/package/rc-segmented)
## Usage
```js
import Segmented from 'rc-segmented';
import 'rc-segmented/assets/index.css'; // import 'rc-segmented/asssets/index.less';
import { render } from 'react-dom';
render(
handleValueChange(value)}
/>,
mountNode,
);
```
## API
Please note that **onChange** API
changed on v2.0.0+
| Property | Type | Default | Description |
| --------- | --------- | --------- | --------- |
| prefixCls | string | rc-segmented | prefixCls of this component |
| className | string | '' | additional class name of segmented |
| style | React.CSSProperties | | style properties of segmented |
| options | Array | [] | options for choices |
| value | string \| number | | value of segmented |
| defaultValue | string \| number | | defaultValue of segmented |
| value | string \| number | | currently selected value of segmented |
| onChange | (value: string \| number) => void | | defaultValue of segmented |
| disabled | boolean | false | disabled status of segmented |
### SegmentedOption
| Property | Type | Default | Description |
| --------- | --------- | --------- | --------- |
| label | ReactNode | | label of segmented option |
| value | string \| number | | value of segmented option |
| className | string | '' | additional class name of segmented option |
| disabled | boolean | false | disabled status of segmented option |
## Development
```
npm install
npm start
```
## License
rc-segmented is released under the MIT license.