🎉 Is-React Version 1.0.0 Released! Utility Methods for React

is-react is a library containing utility methods to identify React components and elements. A common use-case for this functionality occurs when a component accepts a prop with an arbitrary type or array of unknown types and must determine the correct code path depending if it’s a native JavaScript type or constructed via React. I’ll go through examples here, but the NPM library and code are open source, so please check them out if you’re interested in taking a deeper look or contributing!

Example: Simple image component

A simple example to understand the usage

import React from 'react';
import isReact from 'is-react';

const MyImageComponent = ({ SomeProp }) => {
    if (typeof SomeProp === 'string') {
        // assume it's the src for an image
        return <img src={ SomeProp } />
    } else if (isReact.component(SomeProp)) {
        return <SomeProp />;
    } else if (isReact.element(SomeProp)) {
        return SomeProp;
    }

    return null;
}

First we check if the prop is a string. If it is, then we assume it’s the src to an image and return an image element. If it’s not, then we check if it’s either a React element or component and return correctly. This is a simplified version of the logic for the real-world example below.

In addition to classifying elements and components correctly, is-react can also distinguish between class components vs. functional components and DOM-type elements vs. composite-types elements.

Real-World Example: Usage in the Lightbox-React library

Using is-react when a prop is an array of unknown item types.

import isReact from 'is-react'
...
// Display an arbitrary item in the lightbox
const addItem = (activeItem, imageClass, baseStyle = {}) => {
  const DisplayItem = this.props.items[activeItem];
  if (!DisplayItem) {
    return;            
  }             
  
  if (typeof DisplayItem === 'string') {
    // If the item is a string, assume it's an image src
    addImage(activeItem, imageClass, baseStyle);            
  } else if (
    // Check if the item is a React element or component     
    isReact.component(DisplayItem) || isReact.element(DisplayItem)
  ) {
    addComponent(activeItem, imageClass, baseStyle);
  }
};
// Rendering correctly depending if it's a React Element or component
const addComponent = (activeItem, imageClass, baseStyle = {}) => {
  const imageStyle = { ...baseStyle, ...transitionStyle };
  let DisplayItem = this.props.items[activeItem];

  DisplayItem = isReact.component(DisplayItem) ?
                <DisplayItem /> : DisplayItem;

  displayItems.push(
    <div
      className={`${imageClass} ${styles.image}`}
      style={imageStyle}
    >
      { DisplayItem }
    </div>
  );
};

The motivation for writing is-react was a need in another open source project I’m building which is a lightbox for React that accepts both React components or strings as items in an array passed as a prop. If the active item is a type string, then I assume it is the src for an image. If it’s not, then I check to see if it’s a React element or component.

API

All functions return a boolean. The primary functions you will most likely
use are compatible(), element(), and component().

isReact.compatible()

Determine if a variable or expression is compatible with React. Valid React components and elements return true.

isReact.element()

Determine if a variable or expression is a React element. Will return true for both DOM type and Composite type components.

isReact.component()

Determine if a variable or expression is a React component. Will return true for both functional and class components.

isReact.classComponent()

Determine if a variable or expression is a React class component.

isReact.functionComponent()

Determine if a variable or expression is a React functional component.

isReact.DOMTypeElement()

Determine if a variable or expression is a React DOM type element.

isReact.compositeTypeElement()

Determine if a variable or expression is a React Composite type element.

Big thanks to frit-z! Lightbox-React was originally forked from his image lightbox for React that uses an array of strings as image sources as a prop.

If you found this article helpful, please click the💚 below. Follow me for more articles on React, Node.js, JavaScript, and open source software!