1.1.1 • Published 4 years ago
use-hide-if-no-children v1.1.1
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