불필요한 노드를 최소화 하기 위해 webpack으로 React + Typescript + Styled Components + Storybook을 세팅했습니다. 그리고 간단한 lint, prettier 설정도 추가했습니다.
label과 input을 연결해 웹 접근성을 고려한 개발을 하였습니다.
framer-motion 라이브러리를 사용하여 애니메이션을 적용하였습니다.
모바일 환경에서도 동일한 사용감을 제공합니다.
개발자 경험을 위해 tsDoc을 추가하였습니다.
서바사이드 렌더링 지원 -> 해당 기능 잠시 보류입니다.
- package install
- npm i (or yarn)
- run dev server
- npm run dev (or yarn dev)를 통해 구현된 컴포넌트를 localhost:3000에서 확인하실 수 있습니다.
- build
- npm run build (or yarn build)
const App = () => {
return (
<>
<SegmentedControls
options={[
{ value: "one", disabled: true },
{ value: "two" },
{ value: "three" },
]}
defaultIndex={1}
setValue={(val) => console.log(val)}
size={"large"}
name={"one"}
/>
<SegmentedControls
options={[
{ value: "one", disabled: true },
{ value: "two" },
{ value: "three" },
{ value: "four" },
]}
defaultIndex={1}
setValue={(val) => console.log(val)}
size={"small"}
name={"two"}
/>
</>
);
};
Name | Type | Default | Description |
---|---|---|---|
options | { value: string, disabled?: boolean }[] |
Enter the label of segments | |
setValue | Dispatch<SetStateAction<string>> |
callback on input change, passed the value string. Called once initially with the default value on mount. | |
size | large or small |
Enter the size of component you want | |
name | string |
Enter name of the radio s | |
defaultIndex | number |
You could set default value through this property |