mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00

Files

Brian Vaughn a2a025537d Fixed invalid DevTools work tags (#20362 )

* Fixed invalid DevTools work tags

Work tags changed recently (PR #13902) but we didn't bump React versions. This meant that DevTools has valid work tags only for master (and FB www sync) but invalid work tags for the latest open source releases. To fix this, I incremneted React's version in Git (without an actual release) and added a new fork to the work tags detection branch.

This commit also adds tags for the experimental Scope and Fundamental APIs to DevTools so component names will at least display correctly. Technically these new APIs were first introduced to experimental builds ~16.9 but I didn't add a new branch to the work tags fork because I don't they're used commonly. I've just added them to the 17+ branches.

* Removed FundamentalComponent from DevTools tag defs

2020-12-01 10:33:32 -05:00

npm

Add react-is package (#12199 )

2018-02-11 14:08:40 -08:00

src

ReactIs.isValidElementType Unit Test extended with PureComponent case (#20033 )

2020-10-15 08:48:28 -04:00

index.js

Drop the year from Facebook copyright headers and the LICENSE file. (#13593 )

2018-09-07 15:11:23 -07:00

package.json

Fixed invalid DevTools work tags (#20362 )

2020-12-01 10:33:32 -05:00

README.md

Rename StatelessComponent to FunctionComponent in react-is/README.md (#15963 )

2019-06-24 16:21:58 -07:00

README.md

`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