react-is

What is react-is?

The react-is package is a collection of utilities that allow you to determine the type of a React element. It is useful for type-checking elements and for working with React's different types of components and elements in a more abstract way.

What are react-is's main functionalities?

Type-checking elements

This feature allows you to check if a value is a valid React component type or a React element. It's useful for validating props or for conditional rendering logic.

import { isValidElementType, isElement } from 'react-is';

const MyComponent = () => <div>Hello World</div>;
const myElement = <MyComponent />;

const validType = isValidElementType(MyComponent); // true
const elementCheck = isElement(myElement); // true

Identifying different element types

This feature allows you to identify specific element types like fragments, strict mode wrappers, and portals. This can be useful when writing custom rendering logic or testing components.

import { isFragment, isStrictMode, isPortal } from 'react-is';

const myFragment = <React.Fragment></React.Fragment>;
const myStrictMode = <React.StrictMode></React.StrictMode>;
const myPortal = ReactDOM.createPortal(<div />, document.body);

const fragmentCheck = isFragment(myFragment); // true
const strictModeCheck = isStrictMode(myStrictMode); // true
const portalCheck = isPortal(myPortal); // true

Working with Context

This feature allows you to check if an element is a Context Provider or a Context Consumer. This is particularly useful in higher-order components or in libraries that need to handle context-related elements.

import { isContextConsumer, isContextProvider } from 'react-is';

const MyContext = React.createContext();

const contextProviderCheck = isContextProvider(<MyContext.Provider value={null}></MyContext.Provider>); // true
const contextConsumerCheck = isContextConsumer(<MyContext.Consumer>{() => null}</MyContext.Consumer>); // true

Other packages similar to react-is

prop-types

The prop-types package is used for type-checking props passed to React components. It provides runtime type checking for React props and similar functionality for validating component inputs, but it does not offer the same utilities for identifying React element types as react-is.

enzyme

Enzyme is a testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. While it includes methods for type-checking and identifying components, it is more focused on testing utilities rather than providing a comprehensive set of type identifiers like react-is.

README

react-is

This package allows you to test arbitrary values and see if they're a particular React element type.

Installation

# Yarn
yarn add react-is

# NPM
npm install react-is

Usage

Determining if a Component is Valid

import React from "react";
import * as ReactIs from "react-is";

class ClassComponent extends React.Component {
  render() {
    return React.createElement("div");
  }
}

const FunctionComponent = () => React.createElement("div");

const ForwardRefComponent = React.forwardRef((props, ref) =>
  React.createElement(Component, { forwardedRef: ref, ...props })
);

const Context = React.createContext(false);

ReactIs.isValidElementType("div"); // true
ReactIs.isValidElementType(ClassComponent); // true
ReactIs.isValidElementType(FunctionComponent); // true
ReactIs.isValidElementType(ForwardRefComponent); // true
ReactIs.isValidElementType(Context.Provider); // true
ReactIs.isValidElementType(Context.Consumer); // true

Determining an Element's Type

Context

import React from "react";
import * as ReactIs from 'react-is';

const ThemeContext = React.createContext("blue");

ReactIs.isContextConsumer(<ThemeContext.Consumer />); // true
ReactIs.isContextProvider(<ThemeContext.Provider />); // true
ReactIs.typeOf(<ThemeContext.Provider />) === ReactIs.ContextProvider; // true
ReactIs.typeOf(<ThemeContext.Consumer />) === ReactIs.ContextConsumer; // true

Element

import React from "react";
import * as ReactIs from 'react-is';

ReactIs.isElement(<div />); // true
ReactIs.typeOf(<div />) === ReactIs.Element; // true

Fragment

import React from "react";
import * as ReactIs from 'react-is';

ReactIs.isFragment(<></>); // true
ReactIs.typeOf(<></>) === ReactIs.Fragment; // true

Portal

import React from "react";
import ReactDOM from "react-dom";
import * as ReactIs from 'react-is';

const div = document.createElement("div");
const portal = ReactDOM.createPortal(<div />, div);

ReactIs.isPortal(portal); // true
ReactIs.typeOf(portal) === ReactIs.Portal; // true

StrictMode

import React from "react";
import * as ReactIs from 'react-is';

ReactIs.isStrictMode(<React.StrictMode />); // true
ReactIs.typeOf(<React.StrictMode />) === ReactIs.StrictMode; // true

Changelog

19.1.0 (March 28, 2025)

Owner Stack

An Owner Stack is a string representing the components that are directly responsible for rendering a particular component. You can log Owner Stacks when debugging or use Owner Stacks to enhance error overlays or other development tools. Owner Stacks are only available in development builds. Component Stacks in production are unchanged.

• An Owner Stack is a development-only stack trace that helps identify which components are responsible for rendering a particular component. An Owner Stack is distinct from a Component Stacks, which shows the hierarchy of components leading to an error.
• The captureOwnerStack API is only available in development mode and returns a Owner Stack, if available. The API can be used to enhance error overlays or log component relationships when debugging. #29923, #32353, #30306, #32538, #32529, #32538

React

• Enhanced support for Suspense boundaries to be used anywhere, including the client, server, and during hydration. #32069, #32163, #32224, #32252
• Reduced unnecessary client rendering through improved hydration scheduling #31751
• Increased priority of client rendered Suspense boundaries #31776
• Fixed frozen fallback states by rendering unfinished Suspense boundaries on the client. #31620
• Reduced garbage collection pressure by improving Suspense boundary retries. #31667
• Fixed erroneous “Waiting for Paint” log when the passive effect phase was not delayed #31526
• Fixed a regression causing key warnings for flattened positional children in development mode. #32117
• Updated useId to use valid CSS selectors, changing format from :r123: to «r123». #32001
• Added a dev-only warning for null/undefined created in useEffect, useInsertionEffect, and useLayoutEffect. #32355
• Fixed a bug where dev-only methods were exported in production builds. React.act is no longer available in production builds. #32200
• Improved consistency across prod and dev to improve compatibility with Google Closure Complier and bindings #31808
• Improve passive effect scheduling for consistent task yielding. #31785
• Fixed asserts in React Native when passChildrenWhenCloningPersistedNodes is enabled for OffscreenComponent rendering. #32528
• Fixed component name resolution for Portal #32640
• Added support for beforetoggle and toggle events on the dialog element. #32479 #32479

React DOM

• Fixed double warning when the href attribute is an empty string #31783
• Fixed an edge case where getHoistableRoot() didn’t work properly when the container was a Document #32321
• Removed support for using HTML comments (e.g. <!-- -->) as a DOM container. #32250
• Added support for <script> and <template> tags to be nested within <select> tags. #31837
• Fixed responsive images to be preloaded as HTML instead of headers #32445

use-sync-external-store

• Added exports field to package.json for use-sync-external-store to support various entrypoints. #25231

React Server Components

• Added unstable_prerender, a new experimental API for prerendering React Server Components on the server #31724
• Fixed an issue where streams would hang when receiving new chunks after a global error #31840, #31851
• Fixed an issue where pending chunks were counted twice. #31833
• Added support for streaming in edge environments #31852
• Added support for sending custom error names from a server so that they are available in the client for console replaying. #32116
• Updated the server component wire format to remove IDs for hints and console.log because they have no return value #31671
• Exposed registerServerReference in client builds to handle server references in different environments. #32534
• Added react-server-dom-parcel package which integrates Server Components with the Parcel bundler #31725, #32132, #31799, #32294, #31741