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.

github Royal-Navy / standards-toolkit / packages / react-component-library / src / components / Nav / NavItem.tsx View on Github external
const NavItem: React.FC<NavItemProps> = ({ 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
      className={classes}
      data-testid="nav-item"
      onClick={() => {
        setIsOpen(hasChildren && !isOpen)
      }}
    >
github iyegoroff / react-native-image-filter-kit / src / common / create-image-filter.js View on Github external
acc[val] = convert(restProps[val]);

        return acc; 
      },
      {}
    )
  );

  let keepImage = true;

  return (
    <ImageFilter
      style={[defaultStyle.container, style]}
      {...props}
    >
      {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;
        }
      })}
github fontmoa / fontmoa / src / ui / tab2 / index.js View on Github external
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

Recursive and extended utils for React children opaque data structure

MIT
Latest version published 7 months ago

Package Health Score

69 / 100
Full package analysis