layout-component-hp v0.5.2

Installation

In React App

# use npm
npm install layout-component-hp

#use yarn
yarn add layout-component-hp

Container

화면의 폭에 따라 내용의 폭을 조절하고 중앙에 배치하는 레이아웃 컴포넌트

Import

import { Container } from 'layout-component-hp';

Props

Usage

<Container minWidth={300} maxWidth={900}>
  <div>Container</div>
</Container>

Grid

CSS Grid를 사용하여 자식 컴포넌트들을 격자 형태로 배열하는 레이아웃 컴포넌트

Import

import { Grid } from 'layout-component-hp';

Anatomy

• Grid: CSS Grid를 지정한 컨테이너
• Grid.Item: Grid 내 각 아이템 컨테이너

Grid Props

Grid.Item Props

Usage

<Grid columns={5} gap={4}>
  <Grid.Item col={2}>Item1</Grid.Item>
  <Grid.Item colStart={4} colEnd={6}>
    Item2
  </Grid.Item>
</Grid>

Flex

CSS Flexbox를 사용하여 자식 컴포넌트들을 유연하게 배열하는 레이아웃 컴포넌트

Import

import { Flex } from 'layout-component-hp';

Anatomy

• Flex: CSS Flexbox를 지정한 컨테이너
• Flex.Item: Flex 내 각 아이템 컨테이너

Flex Props

Flex.Item Props

Usage

<Flex direction='column' gap={10}>
  <Flex.Item>Item1</Flex.Item>
  <Flex.Item>Item2</Flex.Item>
</Flex>

Drawer

화면의 한쪽에서 슬라이드 형태로 나타나는 메뉴나 사이드바를 제공하는 컴포넌트

Import

import { Drawer } from 'layout-component-hp';

Anatomy

• Drawer: 화면의 한쪽에서 슬라이드 형태로 나타나는 메뉴나 사이드바
• Drawer.Backdrop: Drawer 외부 백그라운드. 클릭으로 Drawer를 닫을 수 있습니다
• Drawer.Content: Drawer 내부 컨텐트
• Drawer.CloseButton: Drawer를 닫을 수 있는 버튼

useDisclosure

import { useDisclosure } from 'layout-component-hp';

const { isOpen, onOpen, onClose } = useDisclosure();

Drawer를 동작할 수 있는 useDisclosure 훅을 제공

• isOpen: Drawer가 열려있는지에 대한 상태
• onOpen: Drawer를 여는 함수
• onClose: Drawer를 닫는 함수

Drawer Props

Drawer.Content Props

Usage

import { Drawer, useDisclosure } from 'layout-component-hp';

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <button type='button' onClick={onOpen}>
        Open Drawer
      </button>
      <Drawer isOpen={isOpen} onClose={onClose} placement='right'>
        <Drawer.Backdrop />
        <Drawer.Content>
          <Drawer.CloseButton />
          <p>This is Drawer</p>
        </Drawer.Content>
      </Drawer>
    </>
  );
}