search

yjose / reactjs-popup

React Popup Component - Modals,Tooltips and Menus —  All in one
https://react-popup.elazizi.com/
MIT License
1.8k stars 207 forks source link

React 18 Typescript error with function as child pattern #310

Open poohcom1 opened 2 years ago

poohcom1 commented 2 years ago

Version

v2.0.5

Issue

When using with React 18, typescript will throw an error when a function is passed as a child, specifically to use the close callback. Although this worked previously in React 17, this now throws an error. I believe this is due to the removal of implicit children as props.

image

Test Case

https://codesandbox.io/s/reactjs-popup-issue-template-forked-8cn80o?file=/src/index.tsx

Proposed Fix

A simple addition of the function type under 

export interface PopupProps {
  ...
  children: React.ReactNode | ((close: () => void, isOpen: boolean) => React.ReactNode)
}

in types.d.ts seemed to do the trick for me.

As a quick fix, augmenting the module in a declaration file will do the trick if you set skipLibCheck to true, but I'm not sure what other side effects this could produce.

EDIT: The proposed fix seem to already exist in the source code, but it's commented out: image Is there a reason it's commented out?

egor-sorokin commented 2 years ago

Are there any updates on this? The error seems still exists