useToast
useToast는 Toast를 더 쉽게 사용할 수 있도록 도와주는 훅입니다.
Toast 컴포넌트를 더 쉽게 사용할 수 있도록 도와주는 훅입니다.
RegionConfig 컴포넌트를 활용하여 노출되는 위치를 조정할 수 있습니다.
import { useToast, Button } from '@wanteddev/wds';
const Demo = () => {
const toast = useToast();
const handleClick = () => {
toast({
variant: 'normal',
content: '메시지에 마침표를 찍어요.',
});
};
return (
<Button onClick={handleClick}>클릭</Button>
)
}
export default Demo;Toast 에서 사용할 수 있는 variant, duration, onAnimationEnd 을 그대로 사용할 수 있습니다.
import { FlexBox, useToast, Button } from '@wanteddev/wds';
import { IconCircleFill } from '@wanteddev/wds-icon';
const Demo = () => {
const toast = useToast();
const handleClick = (variant = 'normal') => () => {
toast({
variant,
content: '메시지에 마침표를 찍어요.',
});
};
const handleClickCustom = () => {
toast({
variant: 'normal',
content: '메시지에 마침표를 찍어요.',
icon: <IconCircleFill sx={theme => ({ color: theme.semantic.accent.background.cyan })} />
});
};
return (
<FlexBox gap="8px" flexWrap="wrap">
<Button onClick={handleClick()}>normal</Button>
<Button onClick={handleClick('positive')}>positive</Button>
<Button onClick={handleClick('cautionary')}>cautionary</Button>
<Button onClick={handleClick('negative')}>negative</Button>
<Button onClick={handleClickCustom}>normal + icon</Button>
</FlexBox>
)
}
export default Demo;id를 직접 주입하고 useRegionStore와 함께 사용하여 열리고 닫히는 상태를 추가적으로 컨트롤 할 수 있습니다.
import { FlexBox, useToast, Button, useRegionStore } from '@wanteddev/wds';
import { useId, useEffect } from 'react';
const Demo = () => {
const toast = useToast();
const hide = useRegionStore((state) => state.hide);
const id = useId();
const handleClickShow = () => {
toast({
id,
variant,
duration: Infinity,
content: '메시지에 마침표를 찍어요.'
});
};
const handleClickHide = () => {
hide(id);
}
useEffect(() => {
return () => hide(id);
}, [])
return (
<FlexBox gap="8px">
<Button onClick={handleClickShow}>show</Button>
<Button onClick={handleClickHide}>hide</Button>
</FlexBox>
)
}
export default Demo;duration 옵션은 Infinity를 지원합니다.