재사용 가능한 레이아웃 컴포넌트 제작과 배포
$ npm install slinky-layout-component
$ yarn add slinky-layout-component
import { Container } from "slinky-layout-component";
<Container tag="div" width={800} height={400}>
{/* ReactNode 형태의 children을 전달 */}
</Container>;
import { Flex } from "slinky-layout-component";
<Flex tag="section" direction="row" justify="space-between" gap={8}>
{/* ReactNode 형태의 children을 전달 */}
</Flex>;
import { Grid } from "slinky-layout-component";
<Grid tag="div" rows="auto" columns={3} gap={16}>
{/* ReactNode 형태의 children을 전달 */}
</Grid>;
import { ParallaxContainer, ParallaxItem } from "slinky-layout-component";
<ParallaxContainer bodyHeight={args.bodyHeight}>
<ParallaxItem
imageUrl={
"https://images.pexels.com/photos/3081487/pexels-photo-3081487.jpeg?cs=srgb&dl=pexels-stein-egil-liland-3081487.jpg&fm=jpg"
}
>
hahaha
</ParallaxItem>
<ParallaxItem imageUrl="https://images.unsplash.com/photo-1503424886307-b090341d25d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D&w=1000&q=80">
hahaha
</ParallaxItem>
<ParallaxItem
imageUrl={
"https://www.adobe.com/content/dam/cc/us/en/creative-cloud/photography/discover/landscape-photography/CODERED_B1_landscape_P2d_714x348.jpg.img.jpg"
}
>
hahaha
</ParallaxItem>
</ParallaxContainer>;
<ParallaxZoom
speed={0.05}
imageURL={
"https://img.freepik.com/free-photo/landscape-with-a-tree_1048-4891.jpg"
}
>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</ParallaxZoom>
상세 사용 방법 : storybook