# di-uni-segmented-control

> 여러 옵션들 중 하나를 선택할 수 있는 컴포넌트입니다. (Radio와 같은 기능)

Latest version **0.1.5** (published 2022-11-20) · 0 weekly downloads

## Install

```sh
npm install di-uni-segmented-control
pnpm add di-uni-segmented-control
yarn add di-uni-segmented-control
bun add di-uni-segmented-control
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2022-11-20 |
| First published | 2022-11-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | di-uni |

## Links

- npm: https://www.npmjs.com/package/di-uni-segmented-control
- Repository: https://github.com/di-uni/toss-segmented-control
- Homepage: https://github.com/di-uni/toss-segmented-control#readme
- Issues: https://github.com/di-uni/toss-segmented-control/issues
- npm.io page: https://npm.io/package/di-uni-segmented-control

## Recent versions

- 0.1.5 (latest) — 2022-11-20
- 0.1.4 — 2022-11-20
- 0.1.3 — 2022-11-20
- 0.1.2 — 2022-11-20
- 0.1.1 — 2022-11-20
- 0.1.0 — 2022-11-20

## README

# Segmented Control

여러 옵션들 중 하나를 선택할 수 있는 컴포넌트입니다.
(Radio와 같은 기능)

![segmented-control](https://user-images.githubusercontent.com/50884017/202901486-d20052ab-1a2e-4d12-8aca-3db614dcd5b5.gif)

<br/>

## Usage

```
yarn add di-uni-segmented-control
```

<br/>

### `<SegmentedControl>`

props:

- `size`: `"large"` 또는 `"small"`, default값은 `"large"`로 설정되어 있습니다.
- `options` (required): `Option[]`, 옵션들의 리스트입니다.

  ```ts
  interface Option {
    id: number;
    label: string;
    value: string;
  }
  ```

- `defaultOpt`: `number`, 옵션의 `id` 값을 이용해 default 옵션을 설정할 수 있습니다. 기본값은 0입니다. (첫번째 옵션)

- `callback`: `(val: string) => void`, 컴포넌트 바깥에서 선택된 옵션값을 이용할 경우 callback을 설정해주면 됩니다.

<br/>

## Example

```tsx
import React, { useState } from "react";
import SegmentedControl from "di-uni-segmented-control";

function App() {
  const options = [
    {
      id: 0,
      label: "하나",
      value: "하나",
    },
    {
      id: 1,
      label: "둘",
      value: "둘",
    },
    {
      id: 2,
      label: "셋",
      value: "셋",
    },
  ];
  const defaultOpt = 2;
  const [selectedVal, setSelectedVal] = useState(options[defaultOpt].value);

  return (
    <div className="App">
      <SegmentedControl
        callback={(val) => setSelectedVal(val)}
        defaultOpt={defaultOpt}
        options={options}
      ></SegmentedControl>
      <p>Size: large, Selected value: {selectedVal}</p>
    </div>
  );
}
```

<br/>

## Demo

https://di-uni-segmented-control.netlify.app/

<br/>

## Development

```
git clone https://github.com/di-uni/toss-segmented-control
yarn install
yarn start
```

<br/>

---
_Source: https://npm.io/package/di-uni-segmented-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._