Socket
Socket
Sign inDemoInstall

react-is

Package Overview
Dependencies
0
Maintainers
4
Versions
1644
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
Weekly downloads
93M
decreased by-1.78%
Maintainers
4
Install size
23.5 kB
Created
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

Changelog

Source

18.3.1 (April 26, 2024)

  • Export act from react f1338f

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

Keywords

FAQs

Last updated on 26 Apr 2024

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