Having typescript issue for the toaster component

[jeevasusej]

I have tried to use the following component but I am having typescript error.

<Toaster
  position="top-center"
  reverseOrder={false}
  gutter={8}
  containerClassName=""
  containerStyle={{}}
  toastOptions={{
    // Define default options
    className: '',
    duration: 5000,
    style: {
      background: '#363636',
      color: '#fff',
    },

    // Default options for specific types
    success: {
      duration: 3000,
      theme: {
        primary: 'green',
        secondary: 'black',
      },
    },
  }}
/>

[guotie]

I have a similar question.

When I use the example useToaster:

import { useToaster } from 'react-hot-toast/headless'

export const Notifications = () => {
  const { toasts, handlers } = useToaster()
  const { startPause, endPause, calculateOffset, updateHeight } = handlers

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 8,
        right: 8,
      }}
      onMouseEnter={startPause}
      onMouseLeave={endPause}
    >
      {toasts.map((toast) => {
        const offset = calculateOffset(toast, {
          reverseOrder: false,
          gutter: 8,
        })

        const ref = (el) => {
          if (el && typeof toast.height !== 'number') {
            const height = el.getBoundingClientRect().height
            updateHeight(toast.id, height)
          }
        }
        return (
          <div
            key={toast.id}
            ref={ref}
            style={{
              position: 'absolute',
              width: '200px',
              background: 'papayawhip',
              transition: 'all 0.5s ease-out',
              opacity: toast.visible ? 1 : 0,
              transform: `translateY(${offset}px)`,
            }}
            {...toast.ariaProps}
          >
            {toast.message}  // ts error here
          </div>
        )
      })}
    </div>
  )
}

and typescript error:

Type 'ValueOrFunction<Renderable, Toast>' is not assignable to type 'ReactNode'.

[BoKleynen]

I'm seeing the same problem as @guotie since upgrading from react 17 to 18

[timolins]

You need to use iconTheme instead of theme:

   success: {
      duration: 3000,
      iconTheme: {
        primary: 'green',
        secondary: 'black',
      },
    },

[timolins]

@guotie @BoKleynen Feel free to open a new issue for this, as it's a different one.

TLDR:

You need to wrap toast.message with resolveValue.

import { resolveValue } from "react-hot-toast/headless";

<div>{resolveValue(toast.message, toast)}</div>

// This ensure compatibility with the following syntax
// toast((t) => <div>My toast id is: {t.id} </div>)`