Determine if a variable or expression is a valid element or component in React
A library to determine if a variable or a 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.
Sponsored by gitconnected
yarn add is-react or npm i --save is-react to use the package.
Real world:
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 <img src={ SomeProp } />
} else if (isReact.component(SomeProp)) {
return <SomeProp />;
} else if (isReact.element(SomeProp)) {
return SomeProp;
}
return null;
}Samples:
// Class Component
class Foo extends React.Component {
render(){
return <h1>Hello</h1>;
}
}
const foo = <Foo />;
//Functional Component
function Bar (props) { return <h1>World</h1> }
const bar = <Bar />;
// React Element
const header = <h1>Title</h1>;
// Check
isReact.compatible(Foo) // true
isReact.component(Foo); // true
isReact.classComponent(Foo); // true
isReact.functionComponent(Foo); // false
isReact.element(Foo); // false
isReact.compatible(<Foo />) // true
isReact.component(<Foo />) // false
isReact.element(<Foo />) // true
isReact.DOMTypeElement(<Foo />) // false
isReact.compositeTypeElement(<Foo />) // true
isReact.compatible(Bar) // true
isReact.component(Bar); // true
isReact.classComponent(Bar); // false
isReact.functionComponent(Bar); // true
isReact.element(Bar); // false
isReact.compatible(<Bar />) // true
isReact.component(<Bar />) // false
isReact.element(<Bar />) // true
isReact.DOMTypeElement(<Bar />) // false
isReact.compositeTypeElement(<Bar />) // true
isReact.compatible(header) // true
isReact.component(header); // false
isReact.element(header); // true
isReact.DOMTypeElement(header) // true
isReact.compositeTypeElement(header) // falseimport 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().
Determine if a variable or expression is compatible with React. Valid React
components and elements return true.
Determine if a variable or expression is a React element. Will return true
for both DOM type and Composite type components.
Determine if a variable or expression is a React component. Will return true
for both functional and class components.
Determine if a variable or expression is a React class component.
Determine if a variable or expression is a React functional component.
Determine if a variable or expression is a React DOM type element.
Determine if a variable or expression is a React Composite type element.
Inspired by this Stackoverflow answer
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent