mirror of
https://github.com/facebook/react.git
synced 2026-02-26 18:58:05 +00:00
In React 19 React will finally stop publishing UMD builds. This is motivated primarily by the lack of use of UMD format and the added complexity of maintaining build infra for these releases. Additionally with ESM becoming more prevalent in browsers and services like esm.sh which can host React as an ESM module there are other options for doing script tag based react loading. This PR removes all the UMD build configs and forks. There are some fixtures that still have references to UMD builds however many of them already do not work (for instance they are using legacy features like ReactDOM.render) and rather than block the removal on these fixtures being brought up to date we'll just move forward and fix or removes fixtures as necessary in the future.
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
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