no-const-is-react

1.3.2 • Public • Published

Is React

is-react?

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 - The Developer Learning Community

Sponsored by BlockAce - The Best Blockchain Jobs Board

Install

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

Examples

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); // 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

Package Sidebar

Install

npm i no-const-is-react

Weekly Downloads

4

Version

1.3.2

License

MIT

Unpacked Size

278 kB

Total Files

8

Last publish

Collaborators

  • algorithmicro