[Toast][React] api.toasts always empty, and api.count 0

[TeChn4K]

Description

When creating one or more toasts, I expected the toast api to update its toasts and count properties. But toast is always empty, and count stays at 0.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/white-leaf-xdgrwt?file=%2Fsrc%2FApp.tsx%3A19%2C48

Steps to Reproduce

1. go to https://codesandbox.io/p/devbox/white-leaf-xdgrwt?file=%2Fsrc%2FApp.tsx%3A19%2C48
2. open your browser devtool
3. click multiple time on the "toastify" button
4. read the log in the console

Ark UI Version

2.2.1

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

No response

[Christian Schröter]

@TeChn4K

Thanks for taking your time to report this issue. In the next version you should be able to access this information using the following approach:

export const Basic = () => {
  const [Toaster, toast] = createToaster({
    placement: 'top-end',
    render(toast) {
      return (
        <Toast.Root>
          <Toast.Title>{toast.title}</Toast.Title>
          <Toast.Description>{toast.description}</Toast.Description>
          <Toast.CloseTrigger>Close</Toast.CloseTrigger>
        </Toast.Root>
      )
    },
  })

  useEffect(() => {
    return toast.subscribe((toasts) => console.log('Toasts:', toasts.length))
  }, [toast])

  const handleToast = () => {
    const id = toast.create({ title: 'Title', description: 'Description' })
    console.log('Toast ID:', id)
  }

  return (
    <>
      <button onClick={handleToast}>Toast</button>
      <Toaster />
    </>
  )
}