import React from 'react'; import { throttle } from 'lodash-es'; import { Toast, Button } from '@douyinfe/semi-ui'; function Demo() { const opts = { content: 'Hi, Bytedance dance dance', duration: 3, }; const handleClose = () => { throttled.cancel(); }; const throttleOpts = { content: 'Hi, Bytedance dance dance', duration: 10, onClose: handleClose, }; const throttled = throttle(() => Toast.info(throttleOpts), 10000, { trailing: false }); return ( <div> <Button onClick={() => Toast.info(opts)}>Display Toast</Button> <br /> <br /> <Button onClick={throttled}>Throttled Toast</Button> </div> ); } render(Demo);

import React from 'react'; import { Toast, Button } from '@douyinfe/semi-ui'; function Demo() { let opts = { content: 'Hi, Bytedance dance dance', duration: 3, }; return ( <> <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button> <br /> <br /> <Button type="warning" onClick={() => Toast.warning(opts)}> Warning </Button> <br /> <br /> <Button type="danger" onClick={() => Toast.error(opts)}> Error </Button> </> ); } render(Demo);

import React from 'react'; import { Toast, Button } from '@douyinfe/semi-ui'; function Demo() { let opts = { content: 'Hi, Bytedance dance dance', duration: 3, theme: 'light', }; return ( <> <Button onClick={() => Toast.info(opts)}>Info</Button> <br /> <br /> <Button style={{ color: `var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button> <br /> <br /> <Button type="warning" onClick={() => Toast.warning(opts)}> Warning </Button> <br /> <br /> <Button type="danger" onClick={() => Toast.error(opts)}> Error </Button> </> ); } render(Demo);

import React from 'react'; import { Toast, Typography, Button } from '@douyinfe/semi-ui'; function Demo() { const { Text } = Typography; let opts = { content: ( <span> <Text>Hi, Bytedance dance dance</Text> <Text link style={{ marginLeft: 12 }}> 更多 </Text> </span> ), duration: 3, }; let multiLineOpts = { content: ( <> <div>Hi, Bytedance dance dance</div> <div style={{ marginTop: 8 }}> <Text link>查看详情</Text> <Text link style={{ marginLeft: 20 }}> 一会再看 </Text> </div> </> ), duration: 3, }; return ( <> <Button onClick={() => Toast.info(opts)}>Display Toast</Button> <br /> <br /> <Button onClick={() => Toast.info(multiLineOpts)}>Display Multi-line Toast</Button> </> ); } render(Demo);

import React from 'react'; import { Toast, Button } from '@douyinfe/semi-ui'; function Demo() { let opts = { content: 'Hi, Bytedance dance dance', duration: 10, }; return <Button onClick={() => Toast.info(opts)}>Close After 10s</Button>; } render(Demo);

import React, { useState } from 'react'; import { Toast, Button } from '@douyinfe/semi-ui'; function Demo() { const [toastId, setToastId] = useState(); function show() { if (toastId) { return; } let id = Toast.info(opts); setToastId(id); } function hide() { Toast.close(toastId); destroy(); } function destroy() { setToastId(null); } let opts = { content: 'Not auto close', duration: 0, onClose: destroy, }; return ( <> <Button type="primary" onClick={show}> Show Toast </Button> <br /> <br /> <Button type="primary" onClick={hide}> Hide Toast </Button> </> ); } render(Demo);

import React, { useState } from 'react'; import { Toast, Button } from '@douyinfe/semi-ui'; function Demo() { function show() { const id = 'toastid'; Toast.info({ content: 'Update Content By Id', id }); setTimeout(() => { Toast.success({ content: 'Id By Content Update', id }); }, 1000); } return ( <Button type="primary" onClick={show}> Update Content By Id </Button> ); } render(Demo);

import React from 'react'; import { Toast, Button } from '@douyinfe/semi-ui'; const ReachableContext = React.createContext(); function Demo(props = {}) { const [toast, contextHolder] = Toast.useToast(); const config = { duration: 0, title: 'This is a success message', content: <ReachableContext.Consumer>{name => `ReachableContext: ${name}`}</ReachableContext.Consumer>, }; return ( <ReachableContext.Provider value="Light"> <div> <Button onClick={() => { toast.success(config); }} > Hook Toast </Button> </div> {contextHolder} </ReachableContext.Provider> ); } render(Demo);

import React, { useRef } from 'react'; import { Toast, Button } from '@douyinfe/semi-ui'; const ReachableContext = React.createContext(); const useCreatePortalInBody = () => { const wrapperRef = useRef(null); if (wrapperRef.current === null && typeof document !== 'undefined') { const div = document.createElement('div'); wrapperRef.current = div; } useLayoutEffect(() => { const wrapper = wrapperRef.current; if (!wrapper || typeof document === 'undefined') { return; } document.querySelector('.article-wrapper').appendChild(wrapper); return () => { document.querySelector('.article-wrapper').appendChild(wrapper); }; }, []); return children => wrapperRef.current && ReactDOM.createPortal(children, wrapperRef.current); }; function Demo(props = {}) { const [toast, contextHolder] = Toast.useToast(); const createBodyPortal = useCreatePortalInBody(); const config = { duration: 3, title: 'This is a success message', content: <ReachableContext.Consumer>{name => `ReachableContext: ${name}`}</ReachableContext.Consumer>, }; return ( <ReachableContext.Provider value="Light"> <div> <Button onClick={() => { toast.success(config); }} > Hook Toast </Button> </div> {createBodyPortal( <div style={{ position: 'fixed', top: 0, left: '50%', zIndex: 10000 }}>{contextHolder}</div> )} </ReachableContext.Provider> ); } render(Demo);

import React from 'react'; import { Button } from '@douyinfe/semi-ui'; function Demo() { const ToastInCustomContainer = ToastFactory.create({ getPopupContainer: () => document.getElementById('custom-toast-container'), }); return ( <div> <Button onClick={() => Toast.info('Toast')}>Default Toast</Button> <br /> <br /> <Button onClick={() => ToastInCustomContainer.info('Toast in some container')}> Toast in custom container </Button> <div id="custom-toast-container">custom container</div> </div> ); } render(Demo);