From 53fdc19df092bbc4bd736aea4ef8e0f12d692ee6 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 29 Mar 2018 11:46:18 -0700 Subject: [PATCH] Updated react-is README to show new isValidElementType() --- packages/react-is/README.md | 44 +++++++++++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 7 deletions(-) diff --git a/packages/react-is/README.md b/packages/react-is/README.md index f744d7d1de..80c1490b2e 100644 --- a/packages/react-is/README.md +++ b/packages/react-is/README.md @@ -1,6 +1,6 @@ # `react-is` -This package allows you to test arbitrary values and see if they're a particular React type, e.g. React Elements. +This package allows you to test arbitrary values and see if they're a particular React element type. ## Installation @@ -14,7 +14,37 @@ npm install react-is --save ## Usage -### AsyncMode +### Determining if a Component is Valid + +```js +import * as ReactIs from "react-is"; + +class ClassComponent extends React.Component { + render() { + return React.createElement("div"); + } +} + +const StatelessComponent = () => React.createElement("div"); + +const ForwardRefComponent = React.forwardRef((props, ref) => + React.createElement(Component, { forwardedRef: ref, ...props }) +); + +const Context = React.createContext(false); + +ReactIs.isValidElementType("div"); // true +ReactIs.isValidElementType(ClassComponent); // true +ReactIs.isValidElementType(StatelessComponent); // true +ReactIs.isValidElementType(ForwardRefComponent); // true +ReactIs.isValidElementType(Context.Provider); // true +ReactIs.isValidElementType(Context.Consumer); // true +ReactIs.isValidElementType(React.createFactory("div")); // true +``` + +### Determining an Element's Type + +#### AsyncMode ```js import React from "react"; @@ -24,7 +54,7 @@ ReactIs.isAsyncMode(); // true ReactIs.typeOf() === ReactIs.AsyncMode; // true ``` -### Context +#### Context ```js import React from "react"; @@ -38,7 +68,7 @@ ReactIs.typeOf() === ReactIs.ContextProvider; // true ReactIs.typeOf() === ReactIs.ContextConsumer; // true ``` -### Element +#### Element ```js import React from "react"; @@ -48,7 +78,7 @@ ReactIs.isElement(
); // true ReactIs.typeOf(
) === ReactIs.Element; // true ``` -### Fragment +#### Fragment ```js import React from "react"; @@ -58,7 +88,7 @@ ReactIs.isFragment(<>); // true ReactIs.typeOf(<>) === ReactIs.Fragment; // true ``` -### Portal +#### Portal ```js import React from "react"; @@ -72,7 +102,7 @@ ReactIs.isPortal(portal); // true ReactIs.typeOf(portal) === ReactIs.Portal; // true ``` -### StrictMode +#### StrictMode ```js import React from "react";