https://github.com/treyhuffine/is-react
Determine if a variable or statement is a React element or component
https://github.com/treyhuffine/is-react
react react-components
Last synced: 9 months ago
JSON representation
Determine if a variable or statement is a React element or component
- Host: GitHub
- URL: https://github.com/treyhuffine/is-react
- Owner: treyhuffine
- Created: 2017-05-16T00:58:06.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:56:23.000Z (over 3 years ago)
- Last Synced: 2025-07-23T22:57:27.580Z (12 months ago)
- Topics: react, react-components
- Language: JavaScript
- Size: 925 KB
- Stars: 29
- Watchers: 1
- Forks: 5
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html) describes elements and components in React, and this [article](https://facebook.github.io/react/docs/jsx-in-depth.html)
gives an understanding of the JSX syntax.
### Sponsored by:
- [Skilled.dev - Coding Interview Course](https://skilled.dev)
- [gitconnected - The Developer Learning Community](https://gitconnected.com)
Note: The React team now offers a package [react-is](https://www.npmjs.com/package/react-is) that provides similar functionality. I recommend checking that out as well to see if it's more suited for your needs.
## 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](http://stackoverflow.com/a/41658173)