Snackbar
Snackbar는 사용자 액션의 결과나 프로세스의 결과를 알려주는 일시적인 알림 요소입니다. 화면 하단에 표시되며 자동으로 사라집니다.
Installation
Props
Snackbar
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | false |
variant? | "default" | "positive" | "critical" | default |
shouldCloseOnAction? | boolean | true |
onAction? | (() => void) | - |
actionLabel? | string | - |
message? | string | - |
SnackbarAdapter.create
| Prop | Type | Default |
|---|---|---|
render? | () => ReactNode | - |
onClose? | (() => void) | - |
removeDelay? | number | 200 |
timeout? | number | 5000 |
Examples
Positive
Critical
Avoid Overlap
<SnackbarAvoidOverlap /> 컴포넌트를 사용하여 스낵바가 겹치지 않아야 하는 영역을 지정할 수 있습니다.
<SnackbarAvoidOverlap />의 자식 컴포넌트는 forwardRef(~React 18) 혹은 ref prop(React 19~)으로 ref를 전달받아야 합니다.
offset은 다음 상황에서 갱신됩니다.
- SnackbarAvoidOverlap의 자식 컴포넌트가 mount될 때
- SnackbarAvoidOverlap의 자식 컴포넌트가 unmount될 때
- SnackbarAvoidOverlap의 자식 컴포넌트의 높이가 변경될 때
- SnackbarRegion의 높이가 변경될 때
Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.