Skip to content

Commit 53fdc19

Browse files
committed
Updated react-is README to show new isValidElementType()
1 parent 96fe3b1 commit 53fdc19

File tree

1 file changed

+37
-7
lines changed

1 file changed

+37
-7
lines changed

packages/react-is/README.md

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# `react-is`
22

3-
This package allows you to test arbitrary values and see if they're a particular React type, e.g. React Elements.
3+
This package allows you to test arbitrary values and see if they're a particular React element type.
44

55
## Installation
66

@@ -14,7 +14,37 @@ npm install react-is --save
1414

1515
## Usage
1616

17-
### AsyncMode
17+
### Determining if a Component is Valid
18+
19+
```js
20+
import * as ReactIs from "react-is";
21+
22+
class ClassComponent extends React.Component {
23+
render() {
24+
return React.createElement("div");
25+
}
26+
}
27+
28+
const StatelessComponent = () => React.createElement("div");
29+
30+
const ForwardRefComponent = React.forwardRef((props, ref) =>
31+
React.createElement(Component, { forwardedRef: ref, ...props })
32+
);
33+
34+
const Context = React.createContext(false);
35+
36+
ReactIs.isValidElementType("div"); // true
37+
ReactIs.isValidElementType(ClassComponent); // true
38+
ReactIs.isValidElementType(StatelessComponent); // true
39+
ReactIs.isValidElementType(ForwardRefComponent); // true
40+
ReactIs.isValidElementType(Context.Provider); // true
41+
ReactIs.isValidElementType(Context.Consumer); // true
42+
ReactIs.isValidElementType(React.createFactory("div")); // true
43+
```
44+
45+
### Determining an Element's Type
46+
47+
#### AsyncMode
1848

1949
```js
2050
import React from "react";
@@ -24,7 +54,7 @@ ReactIs.isAsyncMode(<React.unstable_AsyncMode />); // true
2454
ReactIs.typeOf(<React.unstable_AsyncMode />) === ReactIs.AsyncMode; // true
2555
```
2656

27-
### Context
57+
#### Context
2858

2959
```js
3060
import React from "react";
@@ -38,7 +68,7 @@ ReactIs.typeOf(<ThemeContext.Provider />) === ReactIs.ContextProvider; // true
3868
ReactIs.typeOf(<ThemeContext.Consumer />) === ReactIs.ContextConsumer; // true
3969
```
4070

41-
### Element
71+
#### Element
4272

4373
```js
4474
import React from "react";
@@ -48,7 +78,7 @@ ReactIs.isElement(<div />); // true
4878
ReactIs.typeOf(<div />) === ReactIs.Element; // true
4979
```
5080

51-
### Fragment
81+
#### Fragment
5282

5383
```js
5484
import React from "react";
@@ -58,7 +88,7 @@ ReactIs.isFragment(<></>); // true
5888
ReactIs.typeOf(<></>) === ReactIs.Fragment; // true
5989
```
6090

61-
### Portal
91+
#### Portal
6292

6393
```js
6494
import React from "react";
@@ -72,7 +102,7 @@ ReactIs.isPortal(portal); // true
72102
ReactIs.typeOf(portal) === ReactIs.Portal; // true
73103
```
74104

75-
### StrictMode
105+
#### StrictMode
76106

77107
```js
78108
import React from "react";

0 commit comments

Comments
 (0)