hasChild

A utility to introspect component's children.

Usage

Create a component that needs to check on its children to decide whether it should display them or a default component. hasChild will return false if children are only composed of fragments or falsy values, true otherwise.

// Example.js
import { hasChild } from "swash/utils/hasChild";

export const Example = ({ children }) => {
  return <div>{hasChild(children) ? children : "default component"}</div>;
};

// App.js
import { Example } from './Example';

function App() {
  return (
    <>
        <Example>{[]}</Example> // will render "default component"
        <Example><></></Example> // will render "default component"
        <Example>{[null, false]}</Example> // will render "default component"
        <Example><>Hello!</><Example> // will render "Hello!"
    </>
  )
}