Usage
Vapor 라이브러리의 개발 Quick start 및 문서화 사이트 Vapor Docs 사용법을 안내합니다.
Quick Start
Vapor Installation을 완료하면 Vapor 라이브러리를 사용할 수 있습니다.
import { Button, Input } from '@goorm-dev/vapor-components';
import { SeachIcon } from '@goorm-dev/vapor-icons';
import { useTrapFocus } from '@goorm-dev/vapor-hooks';
function App() {
const ref = useRef < HTMLDivElement > null;
useTrapFocus({ trapContainer: ref, onEscape });
return (
<div ref={ref} role="dialog">
<Button color="primary">
Click
<SeachIcon />
</Button>
<Input type="text" placeholder="Enter your name" />
</div>
);
}TypeScript Support
Vapor는 TypeScript를 완벽히 지원합니다. TypeScript 프로젝트에서 Vapor 컴포넌트를 활용해보세요.
import { ButtonProps } from '@goorm-dev/vapor-components';
type MyButtonProps = ButtonProps & {
// Add custom props
};Figma Resources
Vapor 디자인 시스템 리소스는 Figma에서 확인할 수 있습니다. (Goorm staff only)
Vapor Sync with Figma
Vapor 라이브러리들은 Figma와 동기화되어 있습니다. 개발시에 Goorm Figma에 정의된 컴포넌트를 활용해 시안 개발을 할 수 있습니다. 자세한 내용은 Goorm Figma 사용법을 참고하세요.
Figma를 통해 아래 사항들을 확인할 수 있습니다.
- 컴포넌트 명
- 컴포넌트 속성 (props)
- 컴포넌트 사용 규칙 (rules of use)
Docs Usage
Vapor Docs는 Vapor 라이브러리의 공식 문서입니다.
문서화 사이트에 대한 오류 제보 및 기능 제안은 Github Issue를 통해 제출해주세요.
