@samitouri / QOS-React / commits / 53fdc19df0

Updated react-is README to show new isValidElementType()

Brian Vaughn committed Mar 29, 2018 at 11:46 UTC 53fdc19df092bbc4bd736aea4ef8e0f12d692ee6
1 file changed +37 -7
packages/react-is/README.md
+37 -7
@@ -1,6 +1,6 @@
1 # `react-is`
2
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.
4
5 ## Installation
6
@@ -14,7 +14,37 @@ npm install react-is --save
14
15 ## Usage
16
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
48
49 ```js
50 import React from "react";
@@ -24,7 +54,7 @@ ReactIs.isAsyncMode(<React.unstable_AsyncMode />); // true
54 ReactIs.typeOf(<React.unstable_AsyncMode />) === ReactIs.AsyncMode; // true
55 ```
56
27 -### Context
57 +#### Context
58
59 ```js
60 import React from "react";
@@ -38,7 +68,7 @@ ReactIs.typeOf(<ThemeContext.Provider />) === ReactIs.ContextProvider; // true
68 ReactIs.typeOf(<ThemeContext.Consumer />) === ReactIs.ContextConsumer; // true
69 ```
70
41 -### Element
71 +#### Element
72
73 ```js
74 import React from "react";
@@ -48,7 +78,7 @@ ReactIs.isElement(<div />); // true
78 ReactIs.typeOf(<div />) === ReactIs.Element; // true
79 ```
80
51 -### Fragment
81 +#### Fragment
82
83 ```js
84 import React from "react";
@@ -58,7 +88,7 @@ ReactIs.isFragment(<></>); // true
88 ReactIs.typeOf(<></>) === ReactIs.Fragment; // true
89 ```
90
61 -### Portal
91 +#### Portal
92
93 ```js
94 import React from "react";
@@ -72,7 +102,7 @@ ReactIs.isPortal(portal); // true
102 ReactIs.typeOf(portal) === ReactIs.Portal; // true
103 ```
104
75 -### StrictMode
105 +#### StrictMode
106
107 ```js
108 import React from "react";