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.