shook-layout

Shook Layout

Shook Layout에서는 리액트에서 사용 가능한 Flex 컴포넌트를 제공합니다. 반응형에 따라 Flex 속성을 부여할 수 있습니다. 또한 타입을 함께 제공해주고 있습니다.

설치

$yarn add shook-layout

혹은

$npm install shook-layout

사용

import Flex from 'shook-layout';

const MyComponent = () => {
  return (
    <Flex $direction="column" $gap={10}>
      <Item />
      <Item />
      <Item />
    </Flex>
  );
};

다음과 같이 Flex 컴포넌트의 props로 flex 속성을 넣을 수 있습니다.

import Flex from 'shook-layout';

const MyComponent = () => {
  return (
    <Flex $gap={4} $direction="row" $md={{ $direction: 'column', $gap = 10 }}>
      <Item />
      <Item />
      <Item />
    </Flex>
  );
};

다음과 같이 width에 따라 반응형으로 flex 속성을 차등 부여해줄 수 있습니다.

Props

flex 속성

반응형 속성

각 사이즈 별로 flex 속성을 객체 형태로 값을 넣을 수 있습니다.