react-hot-toast#resolveValue TypeScript Examples

The following examples show how to use react-hot-toast#resolveValue. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Toast.tsx    From ui with MIT License 6 votes vote down vote up 
function Toaster({ children }: ToasterProps) {
  return (
    <Portal.Root className="portal--toast">
      <HotToaster position="bottom-right">
        {({ message, ...t }) =>
          typeof message === 'string' ? (
            <Toast message={message} {...t} />
          ) : (
            <>{resolveValue(message, t)}</>
          )
        }
      </HotToaster>
      {children}
    </Portal.Root>
  )
}
Example #2
Source File: Toast.tsx    From ui with MIT License 4 votes vote down vote up 
/**
 * react-hot-toast is used under-the-hood and is a required dependency.
 *
 * Add `<Toast.Toaster />` to your app or wrap it around your components `<Toast.Toaster><Components /></Toast.Toaster>`
 *
 * You can also just use react-hot-toast's `toast` for basic toasts:
 *
 * `toast.success('Complete!')`
 *
 *  For the extra features you need to use the `Toast.toast` wrapper:
 *
 * `Toast.toast('Message', { description: 'Description', actions: [<SomeButton />] })`
 */
function Toast({
  id,
  visible,
  type,
  icon,
  description,
  closable = true,
  actions,
  actionsPosition = 'inline',
  message,
  width,
  ...rest
}: ToastProps) {
  let containerClasses = [ToastStyles['sbui-toast-container']]
  if (type) {
    containerClasses.push(ToastStyles[`sbui-toast-container--${type}`])
  }
  if (width === 'sm' || width === 'md') {
    containerClasses.push(ToastStyles[`sbui-toast-container--${width}`])
  }

  let closeButtonClasses = [ToastStyles['sbui-toast-close-button']]
  if (type) {
    closeButtonClasses.push(ToastStyles[`sbui-toast-close-button--${type}`])
  }

  let detailsClasses = [ToastStyles['sbui-toast-details']]
  if (actionsPosition === 'bottom') {
    detailsClasses.push(ToastStyles[`sbui-toast-details--actions-bottom`])
  }

  const _message =
    typeof message === 'string' ? (
      <Message>{message}</Message>
    ) : (
      resolveValue(message, rest)
    )

  return (
    <div
      className={`${containerClasses.join(' ')} ${
        visible ? 'animate-enter' : 'animate-leave'
      }`}
    >
      <div>
        <Typography.Text className={ToastStyles['sbui-toast-icon-container']}>
          {type === 'loading' ? (
            <IconLoader
              size="medium"
              strokeWidth={2}
              className={ToastStyles['sbui-alert--anim--spin']}
            />
          ) : (
            icon || icons[type]
          )}
        </Typography.Text>
        <div className={detailsClasses.join(' ')}>
          <div className={ToastStyles['sbui-toast-details__content']}>
            {_message}
            {description && <Description>{description}</Description>}
          </div>
          {actions && (
            <div className={ToastStyles['sbui-toast-details__actions']}>
              {actions}
            </div>
          )}
        </div>
        {closable && (
          <div className={ToastStyles['sbui-toast-close-container']}>
            <button
              aria-label="Close alert"
              className={closeButtonClasses.join(' ')}
              onClick={() => {
                hotToast.dismiss(id)
              }}
            >
              <span className="sr-only">Close</span>
              <IconX
                className="h-5 w-5"
                aria-hidden="true"
                size="small"
                strokeWidth={2}
              />
            </button>
          </div>
        )}
      </div>
    </div>
  )
}