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

Changelog

Source

16.4.0 (May 23, 2018)

React

Add a new experimental React.unstable_Profiler component for measuring performance. (@bvaughn in #12745)

React DOM

Add support for the Pointer Events specification. (@philipp-spiess in #12507)
Properly call getDerivedStateFromProps() regardless of the reason for re-rendering. (@acdlite in #12600 and #12802)
Fix a bug that prevented context propagation in some cases. (@gaearon in #12708)
Fix re-rendering of components using forwardRef() on a deeper setState(). (@gaearon in #12690)
Fix some attributes incorrectly getting removed from custom element nodes. (@airamrguez in #12702)
Fix context providers to not bail out on children if there's a legacy context provider above. (@gaearon in #12586)
Add the ability to specify propTypes on a context provider component. (@nicolevy in #12658)
Fix a false positive warning when using react-lifecycles-compat in <StrictMode>. (@bvaughn in #12644)
Warn when the forwardRef() render function has propTypes or defaultProps. (@bvaughn in #12644)
Improve how forwardRef() and context consumers are displayed in the component stack. (@sophiebits in #12777)
Change internal event names. This can break third-party packages that rely on React internals in unsupported ways. (@philipp-spiess in #12629)

React Test Renderer

Fix the getDerivedStateFromProps() support to match the new React DOM behavior. (@koba04 in #12676)
Fix a testInstance.parent crash when the parent is a fragment or another special node. (@gaearon in #12813)
forwardRef() components are now discoverable by the test renderer traversal methods. (@gaearon in #12725)
Shallow renderer now ignores setState() updaters that return null or undefined. (@koba04 in #12756)

React ART

Fix reading context provided from the tree managed by React DOM. (@acdlite in #12779)

React Call Return (Experimental)

This experiment was deleted because it was affecting the bundle size and the API wasn't good enough. It's likely to come back in the future in some other form. (@gaearon in #12820)

React Reconciler (Experimental)

The new host config shape is flat and doesn't use nested objects. (@gaearon in #12792)

Readme

Source

`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 --save

Usage

Determining if a Component is Valid

import * as ReactIs from "react-is";

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

const StatelessComponent = () => 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(StatelessComponent); // true
ReactIs.isValidElementType(ForwardRefComponent); // true
ReactIs.isValidElementType(Context.Provider); // true
ReactIs.isValidElementType(Context.Consumer); // true
ReactIs.isValidElementType(React.createFactory("div")); // true

Determining an Element's Type

AsyncMode

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

ReactIs.isAsyncMode(<React.unstable_AsyncMode />); // true
ReactIs.typeOf(<React.unstable_AsyncMode />) === ReactIs.AsyncMode; // true

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

Keywords

react

FAQs

What is react-is?

Is react-is well maintained?

Last updated on 24 May 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-is