react-is
    Overview
    Documentation
    Tutorials
    Chat
    Insights
    Code
    Dependencies
    Contributors
    Jobs

react-is

Claim

Brand checking of React Elements.

16.9.0  •  Updated 10 months ago  •  by facebook  •  MIT License

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
ReactIs.isValidElementType(React.createFactory("div")); // 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

Popularity

Weekly Downloads
Add this graph to GitHub
8.7M

Maintenance

Development

Last ver 10 months ago
Created 3 years ago
Last commit 15 days ago
6 hours between commits

Technology

Node version: 10.14.2
26.7K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

117 contributors
Brian Vaughn
232 commits, 139 merges, 105 PRs
Works at facebook
Dominic Gannaway
179 commits, 172 merges, 186 PRs
Works at facebook
Dan Abramov
125 commits, 129 merges, 116 PRs
Works at facebook
Sebastian Markbåge
119 commits, 105 merges, 117 PRs
Works at Facebook
Andrew Clark
114 commits, 97 merges, 119 PRs
Works at facebook
Nicolas Gallagher
37 commits, 33 merges, 29 PRs
Works at Facebook

Dependencies

Tags

react
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookTwitterLinkedIn
© 2020 Devstore, Inc.