Snackbar

Snackbar는 사용자 액션의 결과나 프로세스의 결과를 알려주는 일시적인 알림 요소입니다. 화면 하단에 표시되며 자동으로 사라집니다.

import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

function Component() {
  const adapter = useSnackbarAdapter();

  return (
    <ActionButton
      onClick={() =>
        adapter.create({
          timeout: 5000,
          onClose: () => {},
          render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
        })
      }
    >
      실행
    </ActionButton>
  );
}

export default function SnackbarPreview() {
  return (
    <SnackbarProvider>
      <Component />
    </SnackbarProvider>
  );
}

Installation

npx @seed-design/cli@latest add snackbar

Props

`Snackbar`

Prop

Type

`SnackbarAdapter.create` Parameters (`CreateSnackbarOptions`)

Prop

Type

`SnackbarProvider`

Prop

Type

Examples

Variants

Positive

import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

function Component() {
  const adapter = useSnackbarAdapter();

  return (
    <ActionButton
      onClick={() =>
        adapter.create({
          timeout: 5000,
          onClose: () => {},
          render: () => (
            <Snackbar
              variant="positive"
              message="알림 메세지"
              actionLabel="확인"
              onAction={() => {}}
            />
          ),
        })
      }
    >
      실행
    </ActionButton>
  );
}

export default function SnackbarPositive() {
  return (
    <SnackbarProvider>
      <Component />
    </SnackbarProvider>
  );
}

Critical

import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

function Component() {
  const adapter = useSnackbarAdapter();

  return (
    <ActionButton
      onClick={() =>
        adapter.create({
          timeout: 50000000,
          onClose: () => {},
          render: () => (
            <Snackbar
              variant="critical"
              message="알림 메세지"
              actionLabel="확인"
              onAction={() => {}}
            />
          ),
        })
      }
    >
      실행
    </ActionButton>
  );
}

export default function SnackbarNegative() {
  return (
    <SnackbarProvider>
      <Component />
    </SnackbarProvider>
  );
}

Pause on Interaction

사용자가 Snackbar와 상호작용(hover 및 active) 하는 동안 Snackbar가 timeout으로 인해 dismiss되지 않도록 하려면 SnackbarProvider의 pauseOnInteraction을 true로 설정합니다.

기본값

@seed-design/[email protected]까지: false: 명시하지 않는 경우, 상호작용 여부와 관계없이 timeout이 지나면 dismiss됩니다.
이후 버전: true: 명시하지 않는 경우, 사용자가 상호작용하는 동안 timeout이 멈춥니다.

falsetrue

import { VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";
import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
import { useState } from "react";

function Component() {
  const adapter = useSnackbarAdapter();

  return (
    <ActionButton
      onClick={() =>
        adapter.create({
          timeout: 5000,
          onClose: () => {},
          render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
        })
      }
    >
      실행
    </ActionButton>
  );
}

export default function SnackbarPauseOnInteraction() {
  const [pauseOnInteraction, setPauseOnInteraction] = useState(true);

  return (
    <VStack gap="spacingY.componentDefault" alignItems="center">
      <SnackbarProvider pauseOnInteraction={pauseOnInteraction}>
        <Component />
      </SnackbarProvider>
      <SegmentedControl
        value={`${pauseOnInteraction}`}
        onValueChange={(value) => setPauseOnInteraction(value === "true")}
      >
        <SegmentedControlItem value="false">false</SegmentedControlItem>
        <SegmentedControlItem value="true">true</SegmentedControlItem>
      </SegmentedControl>
    </VStack>
  );
}

Avoid Overlap

<SnackbarAvoidOverlap /> 컴포넌트를 사용하여 스낵바가 겹치지 않아야 하는 영역을 지정할 수 있습니다. <SnackbarAvoidOverlap />의 자식 컴포넌트는 forwardRef(~React 18) 혹은 ref prop(React 19~)으로 ref를 전달받아야 합니다. offset은 다음 상황에서 갱신됩니다.

SnackbarAvoidOverlap의 자식 컴포넌트가 mount될 때
SnackbarAvoidOverlap의 자식 컴포넌트가 unmount될 때
SnackbarAvoidOverlap의 자식 컴포넌트의 높이가 변경될 때
SnackbarRegion의 높이가 변경될 때

Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.

import { Flex, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  Snackbar,
  SnackbarAvoidOverlap,
  SnackbarProvider,
  useSnackbarAdapter,
} from "seed-design/ui/snackbar";

function Component() {
  const adapter = useSnackbarAdapter();

  return (
    <VStack gap="x4">
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 5000,
            onClose: () => {},
            render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
          })
        }
      >
        실행
      </ActionButton>
      <SnackbarAvoidOverlap>
        <Flex width="full" height="x16" bg="bg.criticalWeak" justify="center" align="center">
          Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.
        </Flex>
      </SnackbarAvoidOverlap>
    </VStack>
  );
}

export default function SnackbarPreview() {
  return (
    <SnackbarProvider>
      <Component />
    </SnackbarProvider>
  );
}

Snackbar

Manual Installation

On this page