@hcfy/create-toaster

Toaster.create() of Blueprintjs v5 uses ReactDOM.render(), which will generate warnings in React 18, so I created this module to replace Toaster.create().

Before:

const toaster = Toaster.create(props, container)

After:

import { createToaster } from '@hcfy/create-toaster'

const toasterPromise = createToaster(props, container)

toasterPromise.then(toaster =>{
  toaster.show({ message: 'Hello toaster!' })
})

You can also use the following hook to use it synchronously in function components:

import { createToaster, useToasterState }  from '@hcfy/create-toaster'

const toasterPromise = createToaster(props, container)

function App() {
  const toaster = useToasterState(toasterPromise)

  useEffect(() => {
    toaster?.show({ message: 'Hello toaster!' })
  }, [toaster])
}

or:

import { createToaster, useToasterRef }  from '@hcfy/create-toaster'

const toasterPromise = createToaster(props, container)

function App() {
  const toasterRef = useToasterRef(toasterPromise)

  useEffect(() => {
    toasterRef.current?.show({ message: 'Hello toaster!' })
  }, [toasterRef.current])
}