react-toast-notifications icon indicating copy to clipboard operation
react-toast-notifications copied to clipboard

Extend ToastContainerProps in type declarations with 'div' Element props

Open johnvictorfs opened this issue 5 years ago • 0 comments

This fixes the following issue when using TypeScript:

import { DefaultToastContainer, ToastContainerProps } from 'react-toast-notifications'

export const CustomToastContainer: React.FC<ToastContainerProps> = (props) => (
  <DefaultToastContainer style={{ marginTop: '20px' }} {...props} />
)
No overload matches this call.
  Overload 1 of 2, '(props: PropsWithChildren<ToastContainerProps>, context?: any): ReactElement<any, any> | Component<ToastContainerProps, any, any> | null', gave the following error.
    Type '{ children: ReactNode; className?: string | undefined; hasToasts: boolean; placement: Placement; style: { marginTop: string; }; }' is not assignable to type 'IntrinsicAttributes & ToastContainerProps & { children?: ReactNode; }'.
      Property 'style' does not exist on type 'IntrinsicAttributes & ToastContainerProps & { children?: ReactNode; }'.
  Overload 2 of 2, '(props: ToastContainerProps, context?: any): ReactElement<any, any> | Component<ToastContainerProps, any, any> | null', gave the following error.
    Type '{ children: ReactNode; className?: string | undefined; hasToasts: boolean; placement: Placement; style: { marginTop: string; }; }' is not assignable to type 'IntrinsicAttributes & ToastContainerProps'.
      Property 'style' does not exist on type 'IntrinsicAttributes & ToastContainerProps'.ts(2769)

Since the component does not expect a style prop, that is then passed down to div

export const ToastContainer = ({
  hasToasts,
  placement,
  ...props
}: ToastContainerProps) => (
  <div
    className="react-toast-notifications__container"
    css={{
      boxSizing: 'border-box',
      maxHeight: '100%',
      maxWidth: '100%',
      overflow: 'hidden',
      padding: gutter,
      pointerEvents: hasToasts ? null : 'none',
      position: 'fixed',
      zIndex: 1000,
      ...placements[placement],
    }}
    {...props} // here
  />
);

With fixed type declarations:

image

johnvictorfs avatar Feb 18 '21 18:02 johnvictorfs