Is React

Determine if a variable or expression is a valid element or component in React

A library to determine if a variable or an expression is a React element or component.
For a more thorough understanding, this article describes elements and components in React, and this article
gives an understanding of the JSX syntax.

$3

- Skilled.dev - Coding Interview Course
- gitconnected - The Developer Learning Community

Install

yarn add is-react or npm i --save is-react to use the package.

Examples

Real world:

``javascript
import React from 'react';
import isReact from 'is-react';

const MyImageComponent = ({ SomeProp }) => {
if (typeof SomeProp === 'string') {
// assume it's the src for an image
return ;
} else if (isReact.component(SomeProp)) {
return ;
} else if (isReact.element(SomeProp)) {
return SomeProp;
}

return null;
};
`

---

Samples:

`javascript
// Class Component
class Foo extends React.Component {
render() {
return

Hello

;
}
}

const foo = ;

//Functional Component
function Bar(props) {
return

World

;
}
const bar = ;

// React Element
const header =

Title

;

// Check
isReact.compatible(Foo); // true
isReact.component(Foo); // true
isReact.classComponent(Foo); // true
isReact.functionComponent(Foo); // false
isReact.element(Foo); // false

isReact.compatible(); // true
isReact.component(); // false
isReact.element(); // true
isReact.DOMTypeElement(); // false
isReact.compositeTypeElement(); // true

isReact.compatible(Bar); // true
isReact.component(Bar); // true
isReact.classComponent(Bar); // false
isReact.functionComponent(Bar); // true
isReact.element(Bar); // false

isReact.compatible(); // true
isReact.component(); // false
isReact.element(); // true
isReact.DOMTypeElement(); // false
isReact.compositeTypeElement(); // true

isReact.compatible(header); // true
isReact.component(header); // false
isReact.element(header); // true
isReact.DOMTypeElement(header); // true
isReact.compositeTypeElement(header); // false
`

API

import isReact from 'is-react' to use the package

All functions return a boolean. The primary functions you will most likely
use are compatible(), element(), and component().

#### isReact.compatible()

Determine if a variable or expression is compatible with React. Valid React
components and elements return true.

#### isReact.element()

Determine if a variable or expression is a React element. Will return true
for both DOM type and Composite type components.

#### isReact.component()

Determine if a variable or expression is a React component. Will return true
for both functional and class components.

#### isReact.classComponent()

Determine if a variable or expression is a React class component.

#### isReact.functionComponent()

Determine if a variable or expression is a React functional component.

#### isReact.DOMTypeElement()

Determine if a variable or expression is a React DOM type element.

#### isReact.compositeTypeElement()`

Determine if a variable or expression is a React Composite type element.

Thanks!

Inspired by this Stackoverflow answer