Baton-components NPM

description

바톤 서비스 구현에 사용된 common 컴포넌트 라이브러리

version

version: 1.0.0 (updated in 2023.10.17)

사용법

설치

npm i baton-components

Dropdown

컴포넌트 삽입

import { Dropdown } from 'baton-components';

Prop

Container

props	타입	설명
children	React.ReactNode	Dropdown을 열었을 때 trigger 하위에 그려지는 컴포넌트
trigger	React.ReactNode	Dropdown을 열기 위한 trigger 컴포넌트
isDropdownOpen	boolean	Dropdown열려있는지 확인하는 상태
gapFromTrigger	string	children과 trigger사이의 간격
onClose	() => void	dropdown을 닫는 함수

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <div>
        <Dropdown
          trigger={
            <button
              onClick={() => {
                setIsOpen(true);
              }}
            >
              드롭다운 열기
            </button>
          }
          isDropdownOpen={isOpen}
          onClose={() => {
            setIsOpen(false);
          }}
          gapFromTrigger="40px"
        >
          <div
            style={{ width: '100px', height: '100px', backgroundColor: 'red' }}
          >
            열린 모달
          </div>
        </Dropdown>
      </div>
    </>
  );
}

배포 링크

react react-dom styled-components

@everything-registry/sub-chunk-1219

1.0.0

2 years ago