Installation
In React App
# use npm
npm install conan-layout-component
Container
화면의 폭에 따라 내용의 최대 폭을 제한하고 중앙에 배치하는 레이아웃을 만들기 위한 컴포넌트입니다.
Import
import { Container } from 'conan-layout-component';
Props
| props | type | description |
|---|
| as? | ElementType | Container 컴포넌트의 태그를 변경합니다. |
| minWidth? | CSSProperties'maxWidth' | Container의 최소 넓이 값입니다. |
| maxWidth? | CSSProperties'minWidth' | Container의 최대 넓이 값입니다. |
| style? | CSSProperties | 위 스타일 요소를 제외하고 추가적인 스타일링이 가능합니다. |
| children? | ReactNode | Container의 자식 컴포넌트입니다. |
Usage
<Container minWidth={300} maxWidth={900}>
<div style={{ backgroundColor: '#81D4FA' }}>Item</div>
</Container>
Grid
CSS Grid를 사용하여 자식 컴포넌트들을 격자 형태로 배열하는 컴포넌트입니다.
Import
import { Grid } from 'conan-layout-component';
Grid Props
| props | value | description |
|---|
| as? | ElementType | Grid 컴포넌트의 태그를 변경합니다. |
| rows? | number | Grid row의 갯수를 지정합니다. |
| columns? | number | Grid column의 갯수를 지정합니다. |
| rowGap? | CSSProperties'rowGap' | Grid의 row 간의 간격을 지정합니다. |
| columnGap? | CSSProperties'columnGap' | Grid의 column 간의 간격을 지정합니다. |
| gap? | CSSProperties'gap' | Grid 아이템들의 간격을 지정합니다. |
| style? | CSSProperties | 위 스타일 요소를 제외하고 추가적인 스타일링이 가능합니다. |
| children? | ReactNode | Grid의 자식 컴포넌트입니다. |
Usage
<Grid rows={2} columns={4} gap={20}>
<div style={{ backgroundColor: '#81D4FA' }}>Item 1</div>
<div style={{ backgroundColor: '#4FC3F7' }}>Item 2</div>
<div style={{ backgroundColor: '#29B6F6' }}>Item 3</div>
<div style={{ backgroundColor: '#03A9F4' }}>Item 4</div>
<div style={{ backgroundColor: '#039BE5' }}>Item 5</div>
<div style={{ backgroundColor: '#0288D1' }}>Item 6</div>
<div style={{ backgroundColor: '#0277BD' }}>Item 7</div>
<div style={{ backgroundColor: '#01579B' }}>Item 8</div>
</Grid>
Flex
CSS Flexbox를 사용하여 자식 컴포넌트들을 유연하게 배열하는 컴포넌트입니다.
Import
import { Container } from 'conan-layout-component';
Flex Props
| props | value | description |
|---|
| as? | string | Flex 컴포넌트의 태그를 변경합니다. |
| direction? | CSSProperties'flexDirection' | Flex의 방향을 지정합니다. |
| wrap? | CSSProperties'flexWrap' | Flex 아이템들의 묶음(줄 바꿈)을 지정합니다. |
| justify? | CSSProperties'justifyContent' | Flex direction의 수평축 정렬을 지정합니다. |
| align? | CSSProperties'alignItems' | Flex direction의 수직축 정렬을 지정합니다. |
| gap? | CSSProperties'gap' | Flex 아이템들의 간격을 지정합니다. |
| style? | CSSProperties | 위 스타일 요소를 제외하고 추가적인 스타일링이 가능합니다. |
| children? | ReactNode | Flex의 자식 컴포넌트입니다. |
Usage
<Flex direction="column" gap={10}>
<div style={{ backgroundColor: '#81D4FA' }}>Item 1</div>
<div style={{ backgroundColor: '#4FC3F7' }}>Item 2</div>
<div style={{ backgroundColor: '#29B6F6' }}>Item 3</div>
<div style={{ backgroundColor: '#03A9F4' }}>Item 4</div>
<div style={{ backgroundColor: '#039BE5' }}>Item 5</div>
<div style={{ backgroundColor: '#0288D1' }}>Item 6</div>
<div style={{ backgroundColor: '#0277BD' }}>Item 7</div>
<div style={{ backgroundColor: '#01579B' }}>Item 8</div>
</Flex>
Drawer
화면의 한쪽에서 슬라이드 형태로 나타나는 메뉴나 사이드바를 제공하는 컴포넌트입니다.
Import
import { Drawer, useModal } from 'conan-layout-component';
useModal
| prop | value | description |
|---|
| defaultOpen? | boolean | 모달의 열림/닫힘에 대한 기본값입니다. |
| return | value | description |
|---|
| isOpen | boolean | 모달의 열림/닫힘에 대한 값입니다. 해당 값을 이용해 모달을 조건부 렌더링합니다. |
| openModal | () => void | 모달을 여는 함수입니다. |
| closeModal | () => void | 모달을 닫는 함수입니다. |
const { isOpen, openModal, closeModal } = useModal();
Drawer Props
| props | value | description |
|---|
| placement | 'left' | 'right' | 'top' | 'bottom' | Drawer 컴포넌트의 위치를 지정합니다. |
| onClose | () => void | Drawer 컴포넌트를 닫는 함수를 주입받습니다. |
| children? | ReactNode | Drawer의 자식 컴포넌트입니다. |
Usage
const App = () => {
const { isOpen, openModal, closeModal } = useModal();
return (
<>
<button type="button" onClick={openModal}>
Drawer 열기
</button>
{isOpen && (
<Drawer placement="left" onClose={closeModal}>
<div style={{ width: '20vw', height: '100vh', backgroundColor: '#81D4FA' }}>Contents</div>
</Drawer>
)}
</>
);
};