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.
/** @param {{ children: JSX.Element}} [Props] */
const Wrapper = ({children}) => {...}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With