ck-util-components v1.4.0

Discription

✅ Trigger SelectBox의 Option들이 열리는지 / 열리지 않는지 를 결정하는 Button ✅ Label SelectBox컴포넌트에 대한 라벨을 담은 컴포넌트 ✅ Description SelectBox컴포넌트에 대한 설명을 담은 컴포넌트 ✅ OptionGroup SelectBox의 Option들을 담는 Container ✅ Option SelecBox의 선택지들을 나타내는 컴포넌트 ✅ Value Option들의 값들을 나타내는 컴포넌트 ✅ Indicator 각 Option들이 선택되었는지 나타낼 수 있는 컴포넌트

Option

🐘 defaultOpen Trigger버튼을 누르지 않고도 Option들을 미리 보여주는 옵션 🐘 asChild 자식 컴포넌트가 해당 추상화 된 컴포넌트의 기능을 위임받고 커스텀 된 스타일을 적용할것인지 결정하는 옵션 🐘 externalState context외부의 로직 혹은 상태를 context내부에 주입할 때 사용할 수 있는 옴션

useage

import { Select } from "ck-util-components";

function selecOotion(){
    //
}

const Category = () => {
  return (
    <SelectBox defaultOpen externalSelectState={selectOption}>
      <Select.Label asChild>
        <S.CategoryLabel>
          카테고리<p>*</p>
        </S.CategoryLabel>
      </Select.Label>
      <Select.Description asChild>
        <S.CategoryDescription>
          컨텐츠에 어울리는 카테고리를 선택해주세요.
        </S.CategoryDescription>
      </Select.Description>
      <Select.OptionGroup asChild>
        <S.Wrapper>
          {Object.keys(CategoriesInfo)).map(
            (categoryId) => {
              return (
                <Select.Option id={Number(categoryId)} asChild defaultOpen>
                  <S.CategoryBox>
                    {CategoriesInfo[categoryId].name}
                  </S.CategoryBox>
                </Select.Option>
              );
            }
          )}
        </S.Wrapper>
      </Select.OptionGroup>
    </SelectBox>
  );
};