PropTypes for specific children components - reactjs

Question

I’m struggling to figure out how to specify PropTypes for a set of specific children components. My dialog component is allowed to get components of the type Title, Body and/or Footer. All these components may only be used once but can appear together at the same time.
Is there a recommended way to specify an appropriate PropType?
const Title = ({ text }) => (
<h1>{ text }</h1>
);
const Body = ({ text }) => (
<p>{ text }</p>
);
const Footer = ({ text }) => (
<small>{ text }</small>
);
const Dialog = ({ children }) => (
React.Children.map(children, (child) => {
return (
<div>{child}</div>
)
})
);
Dialog.propTypes = {
children: PropTypes.oneOfType([
PropTypes.instanceOf(Title),
PropTypes.instanceOf(Body),
PropTypes.instanceOf(Footer)
]).isRequired
}

Answer 1

Edited
You could use a custom PropType validation to check if the prop value fits the rules your component expects: component name (Title, Body and/or Footer), if there is only one of each or not, the order of these components...
But it's overkill.
The best in my opinion it's to have these components inside the Dialog component and use props to customize it. eg:
CodeSandbox
const Title = ({ children }) => <h2>{children}</h2>;
const Dialog = ({
title,
showConfirmationButton,
showCancelButton,
onConfirmation,
onCancel,
children
}) => (
<div>
{!!title && <Title>{title}</Title>}
{children}
{(showConfirmationButton || showCancelButton) && <hr />}
{showCancelButton && <button onClick={onCancel}>Cancel</button>}
{showConfirmationButton && <button onClick={onConfirmation}>Ok</button>}
</div>
);
Dialog.propTypes = {
title: PropTypes.string,
showOkButton: PropTypes.bool,
onClickOk: PropTypes.func,
children: PropTypes.any.isRequired
};
export default function App() {
return (
<Dialog
title="Title dialog"
showConfirmationButton
onConfirmation={() => console.log("ok")}
showCancelButton
onCancel={() => console.log("cancel")}
>
<p>The Dialog body as children.</p>
</Dialog>
);
}
Or if you still need to pass the component as a prop, then the best should be:
const Dialog = ({ title, body, footer }) => (
<div>
{ title }
{ body }
{ footer }
</div>
)
Dialog.propTypes = {
title: PropTypes.instanceOf(Title),
footer: PropTypes.instanceOf(Footer),
body: PropTypes.instanceOf(Body)
}
You can check the available prop types here https://reactjs.org/docs/typechecking-with-proptypes.html