[Toast] Extend toast behavior with theme

Description

I’d like to have a default behavior for toast (position, duration, isClosable, etc). Currently, the way to go about it is to create a custom hook.

I’d like to extend it within the theme if possible.

Problem Statement/Justification

I think the DX for this is cleaner than maintaining my own custom useToast hook.

Proposed Solution or API

export const theme = extendTheme(
  {
    components: {
      useToast: {
        defaultProps: {
          position: "bottom-right",
        },
      },
    },
  },
);

Alternatives

No response

Additional Information

No response

[cpv123]

Thanks, @segunadebayo, sounds like a fair decision 👍

For anyone that comes across this, I ended up writing a wrapper that looks like this:

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

export default function useToast() {
  const toast = useChakraToast();
  const notify = (toastOptions: ToastOptions) => {
    toast({
      duration: 4000,
      position: 'top',
      isClosable: true,
      ...toastOptions,
    });
  };

  const notifyWithStatus = (status: ToastOptions['status']) => {
    return (toastOptions: ToastOptions) => notify({ ...toastOptions, status });
  };

  return {
	notify,
    notifyError: notifyWithStatus('error'),
    notifySuccess: notifyWithStatus('success'),
    notifyInfo: notifyWithStatus('info'),
  };
}

[segunadebayo]

I totally understand that this is a feature that sounds nice. I believe this can be resolved on your end by creating a wrapper around useToast.

From an API design perspective, I don’t think it’s a good idea to add this. I know you might disagree, but that’s okay.

In the upcoming changes to the toast component, we intend to add a global toast provider to configure this from the ChakraProvider directly instead of adding that to the theme.

Thanks for understanding.