Is there a working Typescript implementation of a useToast component anywhere? #6813

NickWoodward · 2024-07-31T21:21:52Z

NickWoodward
Jul 31, 2024

https://react-spectrum.adobe.com/react-aria/useToast.html#example

import { useToastState } from "@react-stately/toast";
import { ToastRegion } from "./ToastRegion";

function ToastProvider({ children, ...props }) {
  let state = useToastState({
    maxVisibleToasts: 5,
  });

  return (
    <>
      {children(state)}
      {state.visibleToasts.length > 0 && (
        <ToastRegion {...props} state={state} />
      )}
    </>
  );
}

This is the provider shown in the example at the above link, but the types aren't complete (as is it complains about the state and children type). Demo here: https://codesandbox.io/p/sandbox/react-aria-toast-forked-6wf3c3?workspaceId=16c46381-55e3-4dc6-9eb6-dc5890e46a4d

I know it's also partially a skill issue, but it really would help newer developers to React-Aria if these code snippets were actually working examples.

Thanks,

Nick

*as a further example of why working code might be helpful: After the initial examples you get to a section that says:

In the above examples, each ToastProvider has a separate queue. This setup is simple, and fine for most cases where you can wrap the entire app in a single ToastProvider.

But up until this point there's been no mention or no demonstration of wrapping the entire app, only multiple buttons. Sure wrapping the app is usually how Providers work, but wrapping a function returning a component, and in this case a simple button, definitely wasn't that clear for me and remains that way. I can't seem to implement this and haven't found an example showing me how to. It's a real shame as I'd love to continue using React-Aria!

Answered by LFDanLu

Aug 2, 2024

I've added some types here, the ToastProvider children and state wasn't typed at the top because it depends on what you will allow as the content for your Toasts as shown here: https://react-spectrum.adobe.com/react-aria/useToast.html#typescript. We could consider typing the code snippet you've mentioned in the docs, but I'm a bit concerned that people may then think that only the type we set there is allowed.

As for wrapping an app, the intention is to have the rest of your app within the ToastProvider so that the state is passed down so anything in your app could access the toast state like here. We could perhaps have a more in depth example in the docs to make this clearer.

View full answer

LFDanLu · 2024-08-02T21:38:56Z

LFDanLu
Aug 2, 2024
Collaborator

I've added some types here, the ToastProvider children and state wasn't typed at the top because it depends on what you will allow as the content for your Toasts as shown here: https://react-spectrum.adobe.com/react-aria/useToast.html#typescript. We could consider typing the code snippet you've mentioned in the docs, but I'm a bit concerned that people may then think that only the type we set there is allowed.

As for wrapping an app, the intention is to have the rest of your app within the ToastProvider so that the state is passed down so anything in your app could access the toast state like here. We could perhaps have a more in depth example in the docs to make this clearer.

7 replies

LFDanLu Aug 5, 2024
Collaborator

Oh my bad, I always forgot to make the sandboxs public: https://codesandbox.io/p/sandbox/react-aria-toast-forked-3yhwfm

NickWoodward Aug 5, 2024
Author

Oh my bad, I always forgot to make the sandboxs public: https://codesandbox.io/p/sandbox/react-aria-toast-forked-3yhwfm

**Edit: Me and Claude fluked our way to an answer. See post below

ah no worries, I do that all the time! thanks a lot.

I deleted my previous message as I didn't see your reply and was still struggling slightly with this pattern (related to using Nextjs)

My RootLayout is a server component so createContext can't be used in the layout. Even making the Layout a client component (which I don't want to do) it still complains that

"ToastContext" is not a valid Next.js entry export value.ts(71002)

My best effort has been to put the ToastContext in the ToastProvider file and export both:

// ToastProvider.tsx


export const ToastContext = createContext<ToastState<ReactNode> | null>(null);

export const ToastProvider = (props: ToastProviderProps) => {
  let { children, ...otherProps } = props;
  let state = useToastState<ReactNode>({
    maxVisibleToasts: 5,
  });

  return (
    <>
      {children(state)}
      {state.visibleToasts.length > 0 && (
        <ToastRegion {...otherProps} state={state} />
      )}
    </>
  );
};

export const useModal = () => {
  const context = useContext(ToastContext);
  if (context === undefined) {
    throw new Error("useModal must be used within a ModalProvider");
  }
  return context;
};

and then in Layout.tsx:

      <body className="min-h-screen bg-slate-200">
        <ToastProvider>
          {(toastState) => (
            <ToastContext.Provider value={toastState}>
              <ModalProvider>
                <Header />
                {children}
                <FilterDrawer />
              </ModalProvider>
            </ToastContext.Provider>
          )}
        </ToastProvider>
      </body>

But I get an Unhandled Runtime Error:

Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of from render. Or maybe you meant to call this function rather than return it.
<... children={function children}>

Which I can't work out. Sorry for being a pain, really appreciate any help as I think this is just beyond me tbh!

NickWoodward Aug 5, 2024
Author

What worked for me (I'm still not entirely sure why...)

// Layout.tsx:

        <ToastProvider>
          <ModalProvider>
            <Header />
            {children}
            <FilterDrawer />
          </ModalProvider>
        </ToastProvider>

// ToastProvider.tsx

interface ToastProviderProps extends AriaToastRegionProps {
  children:
    | ((state: ToastState<ReactNode>) => React.ReactNode)
    | React.ReactNode;
}

export const ToastContext = createContext<ToastState<ReactNode> | null>(null);

export const ToastProvider = (props: ToastProviderProps) => {
  let { children, ...otherProps } = props;
  let state = useToastState<ReactNode>({
    maxVisibleToasts: 5,
  });

  return (
    <ToastContext.Provider value={state}>
      {typeof children === "function" ? children(state) : children}
      {state.visibleToasts.length > 0 && (
        <ToastRegion {...otherProps} state={state} />
      )}
    </ToastContext.Provider>
  );
};

export const useModal = () => {
  const context = useContext(ToastContext);
  if (context === undefined) {
    throw new Error("useModal must be used within a ModalProvider");
  }
  return context;
};

I understand the basics of it, but was just a bit confused with why it still needs to accept a function? (I tried typing children to just be a ReactNode and it wasn't happy!)

Either way, it seems to be working! Thanks

LFDanLu Aug 6, 2024
Collaborator

Oh weird, not sure why typescript would complain about that, looks like it is working for me here: https://codesandbox.io/p/sandbox/react-aria-toast-forked-mw5xcf?file=%2Fsrc%2FToastProvider.tsx%3A9%2C23. Glad you got it working though!

NickWoodward Aug 6, 2024
Author

Oh weird, not sure why typescript would complain about that, looks like it is working for me here: https://codesandbox.io/p/sandbox/react-aria-toast-forked-mw5xcf?file=%2Fsrc%2FToastProvider.tsx%3A9%2C23. Glad you got it working though!

Yeah, it's a relief!
Thanks again for your help!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is there a working Typescript implementation of a useToast component anywhere? #6813

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 7 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Is there a working Typescript implementation of a useToast component anywhere? #6813

NickWoodward Jul 31, 2024

Replies: 1 comment · 7 replies

LFDanLu Aug 2, 2024 Collaborator

LFDanLu Aug 5, 2024 Collaborator

NickWoodward Aug 5, 2024 Author

NickWoodward Aug 5, 2024 Author

LFDanLu Aug 6, 2024 Collaborator

NickWoodward Aug 6, 2024 Author

NickWoodward
Jul 31, 2024

Replies: 1 comment 7 replies

LFDanLu
Aug 2, 2024
Collaborator

LFDanLu Aug 5, 2024
Collaborator

NickWoodward Aug 5, 2024
Author

NickWoodward Aug 5, 2024
Author

LFDanLu Aug 6, 2024
Collaborator

NickWoodward Aug 6, 2024
Author