Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extend ToastContainerProps in type declarations with 'div' Element props #152

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

johnvictorfs
Copy link

@johnvictorfs johnvictorfs commented Feb 18, 2021

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 johnvictorfs changed the title Add style prop to ToastContainer Props in type declarations file Extend ToastContainerProps in type declarations with 'div' Element props Feb 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant