iamhosseindhv / notistack

Highly customizable notification snackbars (toasts) that can be stacked on top of each other
https://notistack.com
Other
3.89k stars 299 forks source link

Update example usage docs to add `allowDownload` #570

Open aslanalyiev opened 1 year ago

aslanalyiev commented 1 year ago
image

Expected Behavior

image

Current Behavior

No overload matches this call.
  Overload 1 of 2, '(options: OptionsObject<GrowlerTypesValues.INFO> & { message?: SnackbarMessage; }): SnackbarKey', gave the following error.
    Argument of type '{ variant: GrowlerTypesValues.INFO; message: string; actionText: string; }' is not assignable to parameter of type 'OptionsObject<GrowlerTypesValues.INFO> & { message?: SnackbarMessage; }'.
      Object literal may only specify known properties, and 'actionText' does not exist in type 'OptionsObject<GrowlerTypesValues.INFO> & { message?: SnackbarMessage; }'.
  Overload 2 of 2, '(message: SnackbarMessage, options?: OptionsObject<"default" | "error" | "success" | "warning" | "info"> | undefined): SnackbarKey', gave the following error.
    Argument of type '{ variant: GrowlerTypesValues; message: string; actionText: string; }' is not assignable to parameter of type 'SnackbarMessage'.
      Object literal may only specify known properties, and 'variant' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'.

Steps to Reproduce

  1. Copy-past best practice from off doc - https://notistack.com/features/customization#best-practices
  2. Turn on TS.
  3. Get Error

Your Environment

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "ES2021",
    "downlevelIteration": true,
    "lib": ["dom", "dom.iterable", "esnext", "webworker"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["node", "vitest/globals"],
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "useDefineForClassFields": true,
  },
  "include": ["src", "./types", "./setupTests.ts"],
  "exclude": ["dist"]
}
Tech Version
Notistack v3.0.1
React v.18.2.0
Browser doesn't matter
TS 5.0.4
etc.
iamhosseindhv commented 1 year ago

Hi @aslanalyiev - Have your followed this section of the docs? https://notistack.com/features/customization#custom-variant-(typescript)

Link above explains how to define your custom component's props (which a believe actionText is one of).

Also please provide a codesandbox minimal reproduction so I can help further.

jeffreypeoples commented 1 year ago

I ran into the same confusion.
The official example on codesandbox: https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/custom-snackbar-example-2 it is missing the allowDownload property in its declare module.
It actually reproduces the problem aslan was referring to.