Comparing version 1.1.1 to 1.1.2
{ | ||
"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": { |
@@ -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 @@ |
46208
149