@anys/is-empty-react-node

A utility function for checking if a React node is empty.

Installation

Recommended installation with pnpm:

pnpm add @anys/is-empty-react-node

You can also use other package managers:

npm install @anys/is-empty-react-node
# or
yarn add @anys/is-empty-react-node
# or
bun add @anys/is-empty-react-node

Usage

import { isEmptyReactNode } from '@anys/is-empty-react-node';
import React from 'react';

function Example() {
  const emptyNode = null;
  const textNode = 'Hello';
  const emptyArray = [];
  const emptyFragment = <></>;
  const emptyDiv = <div />;
  const divWithContent = <div>Content</div>;

  console.log(isEmptyReactNode(emptyNode)); // true
  console.log(isEmptyReactNode(textNode)); // false
  console.log(isEmptyReactNode(emptyArray)); // true
  console.log(isEmptyReactNode(emptyFragment)); // true
  console.log(isEmptyReactNode(emptyDiv)); // false
  console.log(isEmptyReactNode(divWithContent)); // false

  return <div>Example</div>;
}

API

isEmptyReactNode(node: React.ReactNode): boolean

Checks if a React node is empty.

Parameters

• node: React node, can be any valid React node type.

Return Value

• boolean: Returns true if the node is empty, otherwise returns false.

Definition of Empty Node

The following cases are considered empty nodes:

• null
• undefined
• false
• Empty array []
• Array with all empty children
• React Fragment with no children <></>

The following cases are considered non-empty nodes:

• React element with no children <div />
• React element with children <div>Content</div>
• React Fragment with children <><div>Content</div></>
• React array with children [<div>Content</div>]
• Text node without tags 'Hello'

License

MIT