Layout-component-dahyeeee NPM

layout-component-dahyeeee

재사용 가능한 기본 레이아웃 리액트 컴포넌트를 모아놓은 라이브러리

installing

npm i @layout-component-dahyeeee

Components

Container

해당 요소를 부모의 가로 중앙에 배치시키는 컴포넌트

imports

import { Container } from '@layout-component-dahyeeee';

Props

props	value	default	description
maxWidth	number \| string	100vw	요소의 최대 너비를 정할 수 있습니다
minWidth	number \| string	100px	요소의 최소 너비를 정할 수 있습니다
as	HTML Element	div	요소의 HTML Tag를 정할 수 있습니다

Grid

자식 컴포넌트들을 격자 형태로 배열하는 컴포넌트

imports

import { Grid } from '@layout-component-dahyeeee';

Props

props	value	default	description
row	number	2	수직축에 몇개의 요소를 나열할지 정할 수 있습니다
column	number	2	수평축에 몇개의 요소를 나열할지 정할 수 있습니다
gap	string	10px	자식 요소 사이의 간격을 정할 수 있습니다
as	HTML Element	div	요소의 HTML Tag를 정할 수 있습니다

Flex

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

imports

import { Flex } from '@layout-component-dahyeeee';

Props

props	value	default	description
dir	row \| column \| row-reverse \| column-reverse	row	요소의 최대 너비를 정할 수 있습니다
align	normal \| stretch \| center \| start \| end \|flex-start \| flex-end \| self-start \| self-end \| baseline \| inherit \| initial \| unset	center	모달이 화면에 나타남의 유무를 정할 수 있습니다.
justify	center \| start \| flex-start \| end \| flex-end \| left \| right \| normal \| space-between \| space-around \| space-evenly \| stretch \| inherit \| initial \| revert \| unset	center	자식요소의
gap	string	10px	자식요소들 간 간격을 정할 수 있습니다
as	HTML Element	div	요소의 HTML Tag를 정할 수 있습니다

SplitPane

화면을 분할해 크기를 조정할 수 있는 컴포넌트 자식컴포넌트를 2개를 넣어줘야 합니다.

imports

import { SplitPane } from '@layout-component-dahyeeee';

Props

props	value	default	description
width	string	100%	SplitPane을 적용하는 컴포넌트의 너비
paneMaxWidth	number	500	왼쪽 pane의 최대 너비. 숫자만 입력 가능하며 px로 고정됩니다.
paneMinWidth	number	100	왼쪽 pane의 최소 너비. 숫자만 입력 가능하며 px로 고정됩니다.
dividerStyle	CSSProperty	div	가운데 분할선의 스타일. 선의 색과 굵이 등을 조절하고 싶다면 'borderRight' 속성을 선언해야 기본 선에 덮어씌워집니다.

css 사용법

해당 라이브러리는 emotion을 사용했습니다.

styles 속성을 사용해 inline으로 css를 적용하면 제일 우선적으로 적용됩니다. emotion의 css 속성을 사용해 css를 적용하면 기존 css 위에 덮어씌워집니다. css파일과 className 속성을 사용해 css를 적용하면 제일 후순위로 적영됩니다.