react-toastify
react-toastify copied to clipboard
Generics with toast.promise custom render function
Do you want to request a feature or report a bug?
A bug.
What is the current behavior?
Currently generics are not used for toast.promise's result type if you use a custom render method.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:
function doPromise(): Promise<string> {
return undefined!;
}
const doSync = () => toast.promise(doPromise(), { success: { render: res => res.data.length } })
What is the expected behavior?
The res.data variable should be a string. Currently it's {} because the type of the promise is not propagated through.
I've already fixed this by adding a generic type param for ToastPromiseParams, UpdateOptions, and ToastOptions. Also, ToastContentProps.data is currently optional, should be required (if it's an optional value, the generic T on ToastContentProps can just be T | undefined in those cases).
I may very well be missing something but this doesn't seem to cause any conflicts.
interface ToastPromiseParams<T> {
pending?: string | UpdateOptions<void>;
success?: string | UpdateOptions<T>;
error?: string | UpdateOptions<unknown>;
}
declare function handlePromise<T>(promise: Promise<T> | (() => Promise<T>), { pending, error, success }: ToastPromiseParams<T>, options?: ToastOptions): Promise<T>;
export interface UpdateOptions<T = {}> extends Nullable<ToastOptions<T>> {
render?: ToastContent<T>;
}
export interface ToastContentProps<Data = {}> {
closeToast?: () => void;
toastProps: ToastProps;
data: Data;
}
export declare type ToastContent<T = {}> = React.ReactNode | ((props: ToastContentProps<T>) => React.ReactNode);
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Not a react/browser issue.