Search code examples
javascriptreactjsjsdocreact-children

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


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.


Solution

  • /** @param {{ children: JSX.Element}} [Props] */
    
    const Wrapper = ({children}) => {...}