I'm trying to create a wrapper ponent 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 ponent as React.ExoticComponent<React.ConsumerProps<MYTYPE>> but doing this it means declaring the ponent 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 ponent.

I'm trying to create a wrapper ponent 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 ponent as React.ExoticComponent<React.ConsumerProps<MYTYPE>> but doing this it means declaring the ponent 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 ponent.

• javascript
• reactjs
• jsdoc
• react-children

2 Answers 2

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

const Wrapper = ({children}) => {...}

If you want to support string, null, nothing (empty), etc. use React.ReactNode and make it optional:

/**
 * @param {Object} props
 * @param {React.ReactNode} [props.children]
 * @returns {JSX.Element}
 */
function Wrapper ({children}) {
  // ...
})

Because:

type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

But:

namespace JSX {
    interface Element extends React.ReactElement<any, any> { }
    ...

See: https://github./DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts