Typing the ToastProvider?

[NickWoodward]

Are there any Typed examples of these components? Just struggling to get them working.

**Edit: Ahh, I think I just needed to make the ToastState type generic?
**Edit2: It then complains about the state props of the ToastRegions:

Type 'ToastState' is not assignable to type 'ToastState'.
Type 'unknown' is not assignable to type 'ReactNode'.ts(2322)

---

Original question:

Just a bit sure how to type the children of the ToastProvider Component? Code here

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

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

This is as close as I got, but it's saying ToastState requires an argument:

interface ToastProviderProps {
  children: (state: ToastState) => ReactNode;
  [key: string]: any;
}

[NickWoodward]

Think I got it:

interface ToastProviderProps<T> {
  children: (state: ToastState<T>) => React.ReactNode;
  [key: string]: any;
}

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

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