# use-hide-if-no-children

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

Latest version **1.1.1** (published 2020-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-hide-if-no-children
pnpm add use-hide-if-no-children
yarn add use-hide-if-no-children
bun add use-hide-if-no-children
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2020-05-14 |
| First published | 2020-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jake Moxey |
| Maintainers | jmoxey |

## Links

- npm: https://www.npmjs.com/package/use-hide-if-no-children
- npm.io page: https://npm.io/package/use-hide-if-no-children

## Recent versions

- 1.1.1 (latest) — 2020-05-14
- 1.1.0 — 2020-05-14
- 1.0.0 — 2020-05-11

## README

# useHideIfNoChildren

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

## Installation

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

## Usage

```jsx
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`:

```jsx
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](https://github.com/jxom)

---
_Source: https://npm.io/package/use-hide-if-no-children · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._