Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible document with jsdoc children or render props used as a function?

Tags:

reactjs

jsdoc

I'm trying to create a wrapper component using the react render pattern, but I also want to document the arguments passed through render/children, in order to have, for example, an helpful intellisense.

I tried to define my own component as React.ExoticComponent<React.ConsumerProps<MYTYPE>> but doing this it means declaring the component like a <Context.Consumer>, hiding the input props.

const Wrapper = ({children}) => {

    const exampleFunction = () => {} 

    return (
        <div>
            {children({exampleFunction})}
        </div>
    )
}

const ImplementationComponent = () => {

    const exampleFunction = () => {} 

    return (
        <Wrapper>
            {({exampleFunction}) => (
                // <Components...>
            )}
        </Wrapper>
    )
}

I want the typechecking in the implementation, in order to help who shall use the wrapper component.

like image 517
Danielo Avatar asked Mar 04 '23 19:03

Danielo


1 Answers

/** @param {{ children: JSX.Element}} [Props] */

const Wrapper = ({children}) => {...}
like image 69
Josh Pittman Avatar answered Apr 09 '23 19:04

Josh Pittman