Notistack: TypeScript support

[RastislavMirek]

It would be great to have d.ts files for this notistack. Did not find them in default @types repo, does have them already done by any chance?

I am on tight deadline right now so I just silenced all type warnings...

[FredyC]

@RastislavMirek if you are fond of new React hooks, you can use this custom hook I've setup types for. Works great :)

import { SnackbarContextNext } from 'notistack/build/SnackbarContext'
import { useContext } from 'react'

interface IEnqueueOptions {
  /** Type of the snackbar */
  variant: 'default' | 'error' | 'success' | 'warning' | 'info'
  /** Event fired when user clicks on action button (if any) */
  onClickAction(): void
  /**
   * You can pass material-ui Snackbar props here, and they will be applied to this individual snackbar.
   * for example, this particular snackbar will be dismissed after 1sec.
   */
  autoHideDuration: number
}

interface IEnqueueSnackbar {
  (message: string, options?: Partial<IEnqueueOptions>)
}

export function useSnackBar() {
  const enqueueSnackbar: IEnqueueSnackbar = useContext(SnackbarContextNext)
  return { enqueueSnackbar }
}

[lucax88x]

@RastislavMirek
What's the problem with the types? I started using the library yesterday, and I have everything correctly typed, without using any @types, maybe it's a recent update, but get a check.

[iamhosseindhv]

index.d.ts file will be improved in the next version. #36

But feel free to reopen this if the problem is still there.

[reverie]

@FredyC This looks like what I want, but could you please give an example of how to use it? I'm trying const { enqueueSnackbar } = useSnackbar(); enqueueSnackbar(message); but getting the error "enqueueSnackbar is not a function".

edit: I ended up using (enqueueSnackbar as any).handleEnqueueSnackbar—I assume there's a better way!

[iamhosseindhv]

Notistack doesn't support hooks at the moment. It will be added in the next major release. (#83)

Meanwhile you can export your component using withSnackbar

[FredyC]

@iamhosseindhv Funny, you are not even aware that you do support hooks already? :) Been using it like this for couple months already.

import { SnackbarContextNext } from 'notistack/build/SnackbarContext'

export function useSnackBar() {
  const enqueueSnackbar = useContext(SnackbarContextNext)
  return {
    enqueueSnackbar,
  }
}

Nothing special really, just grabbing something that's not officially exported :)

[iamhosseindhv]

I don't find the humor @FredyC.

I call #83 "native support" from notistack.
The fact that there's no such import as import { useSnackbar } from 'notistack' means hooks are not supported by notistack; it doesn't mean people can't introduce additional code and make it work.

[FredyC]

@iamhosseindhv Sorry, did not mean it like a joke. I am grateful for the package, it has helped me when I needed it.

Either way, I will stick to my solution as I don't want to be forced to include deprecated context in the tree. There is already enough providers on top of my tree. Would be lovely if you could come up with next major and ditch that thing already :)