Pass toast options to toast render function

🚀 Feature request

I’d like to have the render function passed to the useToast accept props passed to the toast(...) call

🧱 Problem Statement / Justification

As the Toast component cannot be themed (opened an issue about it previously–https://github.com/chakra-ui/chakra-ui/issues/2736), I’d like to create my own useToast hook which would wrap the useToast hook from ChakraUI and provide a render function to it to customise the toast components.

However, when I tried implementing it this way I found out that the render function doesn’t accept the props passed to the toast(...) call such as status, title or description which makes it impossible for me to create a custom, re-usable useToast hook.

✅ Proposed solution or API

I’d like to be able to do something like this

import { useToast as useChakraToast, Box, Text } from '@chakra-ui/react'

export const useToast = props => {
    return useChakraToast({
        render(props) {
            const { status, title, description } = props

            return (
              <Box>
                {status}: <Text fontWeight={700}>{title}</Text><Text color="#eee">{description}</Text>
              </Box>
            )
        },
        ...props,
    })
}

↩️ Alternatives

I’m aware of the fact the there is a plan to introduce a ToastProvider which will enable us to pass a custom Toast component into it.

However, I still think that theming the Toast component or creating a re-usable useToast component is a better approach.

It’s especially beneficial when you have multiple apps using the same set of (themed) Chakra components.

The ToastProvider solution adds the need for extra configuration for every application which uses the same Chakra components whereas using a custom useToast hook (or theming the toast component) don’t.

📝 Additional Information

N/A

[Grsmto]

For anyone looking for a solution, you can workaround with something along these lines:

import {
  UseToastOptions,
  useToast as useChakraToast
} from '@chakra-ui/react'

export const useToast = () => {
  const toast = useChakraToast()

  const returnFunction = (
    options: UseToastOptions
  ) =>
    toast({
      position: 'top',
      duration: 2000,
      render: () => <Toast {...options} {...toast} />,
      ...options
    })

  return Object.assign(returnFunction, toast)
}

[Grsmto]

@sinchang I fixed the types after posting the answer. I just edited my post with the correct types (hopefully).