Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

is-react

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

is-react - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

5

package.json
{
"name": "is-react",
"version": "1.1.1",
"description":
"Determine if a variable or expression is a React element or component",
"version": "1.1.2",
"description": "Determine if a variable or expression is a React element or component",
"main": "index.js",

@@ -7,0 +6,0 @@ "scripts": {

69

README.md

@@ -20,7 +20,9 @@ # Is React

A library to determine if a variable or a 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)
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 [gitconnected](https://gitconnected.com)
### Sponsored by [gitconnected - The Developer Learning Community](https://gitconnected.com)
### Sponsored by [BlockAce - The Best Blockchain Jobs Board](https://blockace.io)
## Install

@@ -33,2 +35,3 @@

Real world:
```javascript

@@ -39,22 +42,23 @@ import React from '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;
}
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;
}
return null;
};
```
______________________
---
Samples:
```javascript
// Class Component
class Foo extends React.Component {
render(){
render() {
return <h1>Hello</h1>;

@@ -67,3 +71,5 @@ }

//Functional Component
function Bar (props) { return <h1>World</h1> }
function Bar(props) {
return <h1>World</h1>;
}
const bar = <Bar />;

@@ -75,3 +81,3 @@

// Check
isReact.compatible(Foo) // true
isReact.compatible(Foo); // true
isReact.component(Foo); // true

@@ -82,9 +88,9 @@ isReact.classComponent(Foo); // true

isReact.compatible(<Foo />) // true
isReact.component(<Foo />) // false
isReact.element(<Foo />) // true
isReact.DOMTypeElement(<Foo />) // false
isReact.compositeTypeElement(<Foo />) // true
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.compatible(Bar); // true
isReact.component(Bar); // true

@@ -95,16 +101,17 @@ isReact.classComponent(Bar); // false

isReact.compatible(<Bar />) // true
isReact.component(<Bar />) // false
isReact.element(<Bar />) // true
isReact.DOMTypeElement(<Bar />) // false
isReact.compositeTypeElement(<Bar />) // true
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.compatible(header); // true
isReact.component(header); // false
isReact.element(header); // true
isReact.DOMTypeElement(header) // true
isReact.compositeTypeElement(header) // false
isReact.DOMTypeElement(header); // true
isReact.compositeTypeElement(header); // false
```
## API
`import isReact from 'is-react'` to use the package

@@ -111,0 +118,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc