https://github.com/drwpow/react-is-esm

https://github.com/drwpow/react-is-esm

Last synced: 9 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/drwpow/react-is-esm
• Owner: drwpow
• Created: 2019-03-26T04:01:13.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-26T04:01:33.000Z (almost 6 years ago)
• Last Synced: 2024-10-15T00:39:24.614Z (2 months ago)
• Language: JavaScript
• Size: 59.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

```js

import React from "react";

import * as ReactIs from 'react-is';

ReactIs.isConcurrentMode(); // true

ReactIs.typeOf() === ReactIs.ConcurrentMode; // true

```

#### Context

```js

import React from "react";

import * as ReactIs from 'react-is';

const ThemeContext = React.createContext("blue");

ReactIs.isContextConsumer(); // true

ReactIs.isContextProvider(); // true

ReactIs.typeOf() === ReactIs.ContextProvider; // true

ReactIs.typeOf() === ReactIs.ContextConsumer; // true

```

#### Element

```js

import React from "react";

import * as ReactIs from 'react-is';

ReactIs.isElement(
); // true

ReactIs.typeOf(
) === 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);


ReactIs.isPortal(portal); // true

ReactIs.typeOf(portal) === ReactIs.Portal; // true

```

#### StrictMode

```js

import React from "react";

import * as ReactIs from 'react-is';

ReactIs.isStrictMode(); // true

ReactIs.typeOf() === ReactIs.StrictMode; // true

```