conan-layout-component

React Layout Component

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>
      )}
    </>
  );
};