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.5.0 (September 5, 2018)

React

Add a warning if React.forwardRef render function doesn't take exactly two arguments (@bvaughn in #13168)
Improve the error message when passing an element to createElement by mistake (@DCtheTall in #13131)
Don't call profiler onRender until after mutations (@bvaughn in #13572)

React DOM

Add support for React DevTools Profiler (@bvaughn in #13058)
Add react-dom/profiling entry point alias for profiling in production (@bvaughn in #13570)
Add onAuxClick event for browsers that support it (@jquense in #11571)
Add movementX and movementY fields to mouse events (@jasonwilliams in #9018)
Add tangentialPressure and twist fields to pointer events (@motiz88 in #13374)
Minimally support iframes (nested browsing contexts) in selection event handling (@acusti in #12037)
Support passing booleans to the focusable SVG attribute (@gaearon in #13339)
Ignore <noscript> on the client when hydrating (@Ephem in #13537)
Fix gridArea to be treated as a unitless CSS property (@mgol in #13550)
Fix incorrect data in compositionend event when typing Korean on IE11 (@crux153 in #12563)
Fix a crash when using dynamic children in the <option> tag (@Slowyn in #13261, @gaearon in #13465)
Fix the checked attribute not getting initially set on the input (@dilidili in #13114)
Fix hydration of dangerouslySetInnerHTML when __html is not a string (@gaearon in #13353)
Fix a warning about missing controlled onChange to fire on falsy values too (@nicolevy in #12628)
Fix submit and reset buttons getting an empty label (@ellsclytn in #12780)
Fix the onSelect event not being triggered after drag and drop (@gaearon in #13422)
Fix the onClick event not working inside a portal on iOS (@aweary in #11927)
Fix a performance issue when thousands of roots are re-rendered (@gaearon in #13335)
Fix a performance regression that also caused onChange to not fire in some cases (@gaearon in #13423)
Handle errors in more edge cases gracefully (@gaearon in #13237 and @acdlite in #13269)
Don't use proxies for synthetic events in development (@gaearon in #12171)
Warn when "false" or "true" is the value of a boolean DOM prop (@motiz88 in #13372)
Warn when this.state is initialized to props (@veekas in #11658)
Don't compare style on hydration in IE due to noisy false positives (@mgol in #13534)
Include StrictMode in the component stack (@gaearon in #13240)
Don't overwrite window.event in IE (@ConradIrwin in #11696)
Improve component stack for the folder/index.js naming convention (@gaearon in #12059)
Improve a warning when using getDerivedStateFromProps without initialized state (@flxwu in #13317)
Improve a warning about invalid textarea usage (@raunofreiberg in #13361)
Treat invalid Symbol and function values more consistently (@raunofreiberg in #13362 and #13389)
Allow Electron <webview> tag without warnings (@philipp-spiess in #13301)
Don't show the uncaught error addendum if e.preventDefault() was called (@gaearon in #13384)
Warn about rendering Generators (@gaearon in #13312)
Remove irrelevant suggestion of a legacy method from a warning (@zx6658 in #13169)
Remove unstable_deferredUpdates in favor of unstable_scheduleWork from schedule (@gaearon in #13488)
Fix unstable asynchronous mode from doing unnecessary work when an update takes too long (@acdlite in #13503)

React DOM Server

Fix crash with nullish children when using dangerouslySetInnerHtml in a selected <option> (@mridgway in #13078)
Fix crash when setTimeout is missing (@dustinsoftware in #13088)

React Test Renderer and Test Utils

Fix this in a functional component for shallow renderer to be undefined (@koba04 in #13144)
Deprecate a Jest-specific ReactTestUtils.mockComponent() helper (@bvaughn in #13193)
Warn about ReactDOM.createPortal usage within the test renderer (@bvaughn in #12895)
Improve a confusing error message (@gaearon in #13351)

React ART

Add support for DevTools (@yunchancho in #13173)

Schedule (Experimental)

New package for cooperatively scheduling work in a browser environment. It's used by React internally, but its public API is not finalized yet. (@flarnie in #12624)

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 06 Sep 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