| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- # `react-is`
- This package allows you to test arbitrary values and see if they're a particular React element type.
- ## Installation
- ```sh
- # Yarn
- yarn add react-is
- # NPM
- npm install react-is
- ```
- ## Usage
- ### Determining if a Component is Valid
- ```js
- 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
- ```js
- 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
- ```js
- import React from "react";
- import * as ReactIs from 'react-is';
- ReactIs.isElement(<div />); // true
- ReactIs.typeOf(<div />) === ReactIs.Element; // true
- ```
- #### Fragment
- ```js
- import React from "react";
- import * as ReactIs from 'react-is';
- ReactIs.isFragment(<></>); // true
- ReactIs.typeOf(<></>) === ReactIs.Fragment; // true
- ```
- #### Portal
- ```js
- 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
- ```js
- import React from "react";
- import * as ReactIs from 'react-is';
- ReactIs.isStrictMode(<React.StrictMode />); // true
- ReactIs.typeOf(<React.StrictMode />) === ReactIs.StrictMode; // true
- ```
|