Socket
Socket
Sign inDemoInstall

react-is

Package Overview
Dependencies
0
Maintainers
8
Versions
1562
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-is

Brand checking of React Elements.


Version published
Maintainers
8
Weekly downloads
89,876,622
decreased by-7%

Weekly downloads

Package description

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

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

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

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

ReactIs.isConcurrentMode(<React.unstable_ConcurrentMode />); // true
ReactIs.typeOf(<React.unstable_ConcurrentMode />) === ReactIs.ConcurrentMode; // 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

FAQs

Last updated on 28 Mar 2019

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc