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

Trey Huffine

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 lightboxconst 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 componentconst 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!

Trey Huffine

Written by

Founder of gitconnected.com - Passionate for open source software and teaching people how to code. Learn to code => gitconnected.com/learn

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade