Snackbar

화면 상단에 일시적인 메시지를 표시하여 사용자에게 정보를 전달하는 컴포넌트입니다. 여러 개의 Snackbar를 동시에 표시할 수 있으며, 자동으로 사라집니다.

앱 예제 Playgroundv1.0.2

소스 보기새 창에서 열기

Interactive exampleSnackbar 로컬 웹 예제

예제를 선택하면 현재 저장소 소스로 만든 Expo Web 화면을 불러옵니다.

웹 미지원 또는 플랫폼 종속 기능은 실제 iOS·Android 앱에서 확인하세요.

SnackbarNotify 렌더러

SnackbarNotify는 OverlayProvider가 스낵바 큐와 최대 표시 개수를 렌더링하는 내부 호스트입니다. 직접 마운트하는 대신 showSnackBar()를 호출하고, 전체 스낵바를 즉시 비울 때는 hideOverlay('snack')을 사용하세요. 모양을 교체하려면 OverlayProvider의 customSnackbar를 전달합니다.

기본 사용법

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { showSnackBar } = useOverlay();

  const handleShowSnackbar = () => {
    showSnackBar({
      message: '작업이 완료되었습니다.',
      type: 'success',
    });
  };

  return <Button title="Snackbar 표시" onPress={handleShowSnackbar} />;
}

API 참조

showSnackBar 함수

showSnackBar(props: ShowSnackBarProps): void

ShowSnackBarProps 인터페이스

Prop	Type	Default	Description
message	string	Required	Snackbar에 표시할 메시지
type	SnackType	'success'	Snackbar의 유형 ('success', 'error', '')
index	number	Date.now()	Snackbar의 고유 식별자
snackbarDuration	number	3500	Snackbar가 표시될 지속 시간 (밀리초)

SnackType 타입

type SnackType = 'success' | 'error' | '';

특징

• 자동 사라짐: 지정된 시간 후 자동으로 사라집니다
• 다중 표시: 여러 개의 Snackbar를 동시에 표시할 수 있습니다
• 커스터마이징: OverlayProvider에서 커스텀 Snackbar 컴포넌트를 사용할 수 있습니다

예제

성공 메시지

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { showSnackBar } = useOverlay();

  const handleSuccess = () => {
    showSnackBar({
      message: '저장되었습니다.',
      type: 'success',
    });
  };

  return <Button title="성공 메시지" onPress={handleSuccess} />;
}

에러 메시지

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { showSnackBar } = useOverlay();

  const handleError = () => {
    showSnackBar({
      message: '오류가 발생했습니다.',
      type: 'error',
    });
  };

  return <Button title="에러 메시지" onPress={handleError} />;
}

일반 메시지

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { showSnackBar } = useOverlay();

  const handleShowMessage = () => {
    showSnackBar({
      message: '알림 메시지',
      type: '',
    });
  };

  return <Button title="메시지 표시" onPress={handleShowMessage} />;
}

커스텀 지속 시간

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { showSnackBar } = useOverlay();

  const handleShowMessage = () => {
    showSnackBar({
      message: '5초 동안 표시됩니다.',
      type: 'success',
      snackbarDuration: 5000,
    });
  };

  return <Button title="메시지 표시" onPress={handleShowMessage} />;
}

고유 ID 지정

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { showSnackBar } = useOverlay();

  const handleShowMessage = () => {
    showSnackBar({
      message: '메시지',
      type: 'success',
      index: 12345,
    });
  };

  return <Button title="메시지 표시" onPress={handleShowMessage} />;
}

커스텀 Snackbar 컴포넌트

OverlayProvider에 커스텀 Snackbar 컴포넌트를 전달할 수 있습니다:

import { OverlayProvider, CustomSnackbarProps } from '@0610studio/zs-ui';
import { View, Text } from 'react-native';

function CustomSnackbar({ snackType, snackMessage }: CustomSnackbarProps) {
  return (
    <View style={{
      backgroundColor: snackType === 'error' ? '#e74c3c' : '#2ecc71',
      padding: 15,
      borderRadius: 8,
    }}>
      <Text style={{ color: '#fff' }}>{snackMessage}</Text>
    </View>
  );
}

function App() {
  return (
    <OverlayProvider customSnackbar={CustomSnackbar}>
      {/* 앱 내용 */}
    </OverlayProvider>
  );
}

Snackbar 닫기

import { useOverlay } from '@0610studio/zs-ui';

function MyComponent() {
  const { hideOverlay } = useOverlay();

  // 모든 Snackbar 닫기
  const closeAll = () => {
    hideOverlay('snack');
  };

  return <Button title="모두 닫기" onPress={closeAll} />;
}

최대 개수 제한

OverlayProvider에서 동시에 표시할 수 있는 Snackbar의 최대 개수를 설정할 수 있습니다:

<OverlayProvider maxSnackbarCount={5}>
  {/* 앱 내용 */}
</OverlayProvider>