HStack

HStack 컴포넌트는 Lynx에서 자식 요소를 가로 방향으로 쌓는 레이아웃 컴포넌트입니다.

Installation

npm install @seed-design/lynx-react @seed-design/lynx-css

Usage

import { Box, HStack, Text } from "@seed-design/lynx-react";

export function App() {
  return (
    <HStack gap="x2" align="center" justify="spaceBetween">
      <Box bg="bg.brandWeak" borderRadius="r2" px="x3" py="x2">
        <Text textStyle="t3Bold" color="fg.brand">
          A
        </Text>
      </Box>
      <Box bg="bg.positiveWeak" borderRadius="r2" px="x3" py="x2">
        <Text textStyle="t3Bold" color="fg.positive">
          B
        </Text>
      </Box>
    </HStack>
  );
}

HStack은 Lynx 네이티브 <view>를 직접 렌더링하며 display="flex"와 flexDirection="row"를 기본 적용합니다. Box를 내부에서 합성하지 않아 반복 렌더링에서 primitive 컴포넌트 단계를 줄입니다.

성능에 민감한 반복 레이아웃을 앱 코드에서 구성할 때는 native <view>/<text>에 Tailwind utility className을 직접 사용하는 방식을 우선 고려하세요. 패키지 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은 런타임 값이 필요한 경우에만 제한적으로 사용합니다.

Props

Prop

Type

align?"center" | (string & {}) | "flexStart" | "flexEnd" | "stretch" | undefined

justify?"center" | (string & {}) | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround" | undefined

wrap?boolean | "wrap" | "nowrap" | undefined

grow?boolean | Property.FlexGrow | undefined

shrink?boolean | Property.FlexShrink | undefined

bindtouchstart?(() => void) | undefined

bindtouchend?(() => void) | undefined

bindtouchcancel?(() => void) | undefined

bg?(string & {}) | ScopedColorPalette | ScopedColorBg | ScopedColorBanner | undefined

background?(string & {}) | ScopedColorPalette | ScopedColorBg | ScopedColorBanner | undefined

color?(string & {}) | ScopedColorFg | ScopedColorPalette | undefined

borderColor?(string & {}) | ScopedColorPalette | ScopedColorStroke | undefined

borderWidth?0 | 1 | (string & {}) | undefined

borderTopWidth?0 | 1 | (string & {}) | undefined

borderRightWidth?0 | 1 | (string & {}) | undefined

borderBottomWidth?0 | 1 | (string & {}) | undefined

borderLeftWidth?0 | 1 | (string & {}) | undefined

borderRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderTopLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderTopRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderBottomRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderBottomLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

width?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

minWidth?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

maxWidth?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

height?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

minHeight?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

maxHeight?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

top?0 | (string & {}) | undefined

left?0 | (string & {}) | undefined

right?0 | (string & {}) | undefined

bottom?0 | (string & {}) | undefined

padding?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

p?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

paddingX?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

px?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

paddingY?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

py?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

paddingTop?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | "safeArea" | undefined

pt?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | "safeArea" | undefined

paddingRight?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

pr?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

paddingBottom?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | "safeArea" | undefined

pb?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | "safeArea" | undefined

paddingLeft?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

pl?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

position?(string & {}) | "relative" | "absolute" | "fixed" | undefined

overflowX?(string & {}) | "hidden" | "visible" | undefined

overflowY?(string & {}) | "hidden" | "visible" | undefined

zIndex?Property.ZIndex | undefined

justifySelf?Property.JustifySelf | undefined

alignContent?(string & {}) | "center" | "stretch" | "flexStart" | "flexEnd" | undefined

alignSelf?(string & {}) | "center" | "stretch" | "flexStart" | "flexEnd" | undefined

gap?

0 | (string & {}) | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | Dimension | undefined

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

bindtap?EventHandler<BaseTouchEvent<Target>> | undefined

main-thread:bindtap?EventHandler<BaseTouchEvent<Element>> | undefined

Layout Aliases

HStack은 VStack과 동일한 alias를 제공합니다.

Prop	적용되는 style
`align`	`alignItems`
`justify`	`justifyContent`
`wrap`	`flexWrap`
`grow`	`flexGrow`
`shrink`	`flexShrink`

가로 방향에서 줄바꿈이 필요하면 wrap을 사용합니다.

<HStack gap="x2" wrap>
  <Box px="x3" py="x1" borderRadius="full" bg="bg.neutralWeak">
    <Text>chip</Text>
  </Box>
  <Box px="x3" py="x1" borderRadius="full" bg="bg.neutralWeak">
    <Text>chip</Text>
  </Box>
</HStack>

웹 버전과의 차이

Lynx HStack은 React HStack과 다음과 같은 차이가 있습니다.

as, asChild를 지원하지 않습니다. 항상 Lynx 네이티브 <view>를 렌더링합니다.
Stack이라는 deprecated alias는 제공하지 않습니다. Lynx에서는 VStack / HStack을 명시적으로 사용합니다.
지원하지 않는 StyleProps는 Box와 동일하게 열지 않습니다.