| 55 | } |
| 56 | |
| 57 | function Toast(props) { |
| 58 | let state = useContext(ToastContext)!; |
| 59 | let ref = useRef(null); |
| 60 | let {toastProps, contentProps, titleProps, closeButtonProps} = useToast(props, state, ref); |
| 61 | let buttonRef = useRef(null); |
| 62 | let {buttonProps} = useButton(closeButtonProps, buttonRef); |
| 63 | |
| 64 | return ( |
| 65 | <div {...toastProps} ref={ref} style={{margin: 20, display: 'flex', gap: 5}}> |
| 66 | <div {...contentProps}> |
| 67 | <div {...titleProps}>{props.toast.content}</div> |
| 68 | </div> |
| 69 | <button {...buttonProps} ref={buttonRef}> |
| 70 | x |
| 71 | </button> |
| 72 | </div> |
| 73 | ); |
| 74 | } |