Search code examples
reactjstypescriptreact-tsx

Type '(close: () => void) => ReactElement' is not assignable to type 'ReactNode'

I am trying to use @Reactjs-popup following this example but in TypeScript, and when I access close function it shows this error.

Type '(close: () => void) => ReactElement' is not assignable to type 'ReactNode'.

Original code(.js):

    <Popup
      modal
      overlayStyle={{ background: "rgba(255,255,255,0.98" }}
      contentStyle={contentStyle}
      closeOnDocumentClick={false}
      trigger={open => <BurgerIcon open={open} />}
    >
      {close => <Menu close={close} />}
    </Popup>

My Code(.tsx):

        <Popup
            modal
            overlayStyle={{ background: "rgba(255,255,255,0.98" }}
            contentStyle={contentStyle}
            closeOnDocumentClick
            trigger={(open: boolean): ReactElement => <BurgerIcon open={open} />}
        >
            {(close: () => void): ReactElement => <Menu close={close} />}
        </Popup>
Solution

  • The types for this library are incomplete.

    It looks like this line that would allow a function to be used as children is commented out.

      children: React.ReactNode;

  //| ((close: () => void, isOpen: boolean) => React.ReactNode);

    I'm assuming it was difficult to type properly and the library author gave up.

    In addition, this library has not been changed in 2 years, and has this banner on the top:

    enter image description here

    To me, these would be clues that it may be best to choose a different library.