useHideIfNoChildren

Well, it hides your component if it has no children!

Installation

npm install use-hide-if-no-children --save

Usage

import * as React from 'react';
import { useHideIfNoChildren } from 'use-hide-if-no-children';

const App = () => {
  const hideIfNoChildren = useHideIfNoChildren();

  return (
    <div 
      {...hideIfNoChildren.parent} 
      style={{ backgroundColor: 'pink', padding: '1rem', display: 'flex' }}
    >
      {/* if there are 0 nodes here, then the parent component will be hidden. */}
    </div>
  );
};

Deeply nested children

There may be a case where you might want to hide the parent component if one of it's nested descendant compoenent has no children.

In this case, you can use the child attribute from useHideIfNoChildren:

import * as React from 'react';
import { useHideIfNoChildren } from 'use-hide-if-no-children';

const App = () => {
  const hideIfNoChildren = useHideIfNoChildren();

  return (
    <div 
      {...hideIfNoChildren.parent} 
      style={{ backgroundColor: 'pink', padding: '1rem', display: 'flex' }}
    >
      <h1>Here are your children!</h1>
      <div {...hideIfNoChildren.child}>
        {/* if there are 0 nodes here, then the parent component will be hidden. */}
      </div>
    </div>
  );
};

useHideIfNoChildren(options) API

options

parentRefKey

string | Optional

Provide an override ref key (if your component forwards ref under a different prop).

childRefKey

string | Optional

Provide an override ref key (if your component forwards ref under a different prop).

License

MIT © Jake Moxey