How to use react-children-utilities - 3 common examples
To help you get started, we’ve selected a few react-children-utilities examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Royal-Navy / standards-toolkit / packages / react-component-library / src / components / Nav / NavItem.tsx View on Github 
const NavItem: React.FC = ({ children, hasChildren = false }) => {
// @ts-ignore
const foundActive = !!Children.deepFind(children, ({ props }) => props.active)
const [isOpen, setIsOpen] = useState(foundActive && hasChildren)
const classes = `
rn-nav__list-item
${hasChildren ? 'has-children' : ''}
${isOpen ? 'is-open' : ''}
`
return (
<li data-testid="nav-item"> {
setIsOpen(hasChildren && !isOpen)
}}
></li>acc[val] = convert(restProps[val]);
return acc;
},
{}
)
);
let keepImage = true;
return (
{Children.deepMap(children, (child) => {
if (isImage(child)) {
if (keepImage) {
keepImage = false;
return child;
} else {
return React.cloneElement(
child,
{ ...child.props, style: mapHiddenImageStyle(child.props.style) }
);
}
} else {
return child;
}
})}constructor (props) {
super(props)
const activeTab = Children.filter(props.children, (child) => { return child.props.active }).map((it) => {
return it.props.id;
})[0];
this.state = {
activeTab : activeTab || ""
}
this.tabs = {}
}react-children-utilities
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.
