1. # `react-is`
    
  2. 
    
  3. This package allows you to test arbitrary values and see if they're a particular React element type.
    
  4. 
    
  5. ## Installation
    
  6. 
    
  7. ```sh
    
  8. # Yarn
    
  9. yarn add react-is
    
  10. 
    
  11. # NPM
    
  12. npm install react-is
    
  13. ```
    
  14. 
    
  15. ## Usage
    
  16. 
    
  17. ### Determining if a Component is Valid
    
  18. 
    
  19. ```js
    
  20. import React from "react";
    
  21. import * as ReactIs from "react-is";
    
  22. 
    
  23. class ClassComponent extends React.Component {
    
  24.   render() {
    
  25.     return React.createElement("div");
    
  26.   }
    
  27. }
    
  28. 
    
  29. const FunctionComponent = () => React.createElement("div");
    
  30. 
    
  31. const ForwardRefComponent = React.forwardRef((props, ref) =>
    
  32.   React.createElement(Component, { forwardedRef: ref, ...props })
    
  33. );
    
  34. 
    
  35. const Context = React.createContext(false);
    
  36. 
    
  37. ReactIs.isValidElementType("div"); // true
    
  38. ReactIs.isValidElementType(ClassComponent); // true
    
  39. ReactIs.isValidElementType(FunctionComponent); // true
    
  40. ReactIs.isValidElementType(ForwardRefComponent); // true
    
  41. ReactIs.isValidElementType(Context.Provider); // true
    
  42. ReactIs.isValidElementType(Context.Consumer); // true
    
  43. ReactIs.isValidElementType(React.createFactory("div")); // true
    
  44. ```
    
  45. 
    
  46. ### Determining an Element's Type
    
  47. 
    
  48. #### Context
    
  49. 
    
  50. ```js
    
  51. import React from "react";
    
  52. import * as ReactIs from 'react-is';
    
  53. 
    
  54. const ThemeContext = React.createContext("blue");
    
  55. 
    
  56. ReactIs.isContextConsumer(<ThemeContext.Consumer />); // true
    
  57. ReactIs.isContextProvider(<ThemeContext.Provider />); // true
    
  58. ReactIs.typeOf(<ThemeContext.Provider />) === ReactIs.ContextProvider; // true
    
  59. ReactIs.typeOf(<ThemeContext.Consumer />) === ReactIs.ContextConsumer; // true
    
  60. ```
    
  61. 
    
  62. #### Element
    
  63. 
    
  64. ```js
    
  65. import React from "react";
    
  66. import * as ReactIs from 'react-is';
    
  67. 
    
  68. ReactIs.isElement(<div />); // true
    
  69. ReactIs.typeOf(<div />) === ReactIs.Element; // true
    
  70. ```
    
  71. 
    
  72. #### Fragment
    
  73. 
    
  74. ```js
    
  75. import React from "react";
    
  76. import * as ReactIs from 'react-is';
    
  77. 
    
  78. ReactIs.isFragment(<></>); // true
    
  79. ReactIs.typeOf(<></>) === ReactIs.Fragment; // true
    
  80. ```
    
  81. 
    
  82. #### Portal
    
  83. 
    
  84. ```js
    
  85. import React from "react";
    
  86. import ReactDOM from "react-dom";
    
  87. import * as ReactIs from 'react-is';
    
  88. 
    
  89. const div = document.createElement("div");
    
  90. const portal = ReactDOM.createPortal(<div />, div);
    
  91. 
    
  92. ReactIs.isPortal(portal); // true
    
  93. ReactIs.typeOf(portal) === ReactIs.Portal; // true
    
  94. ```
    
  95. 
    
  96. #### StrictMode
    
  97. 
    
  98. ```js
    
  99. import React from "react";
    
  100. import * as ReactIs from 'react-is';
    
  101. 
    
  102. ReactIs.isStrictMode(<React.StrictMode />); // true
    
  103. ReactIs.typeOf(<React.StrictMode />) === ReactIs.StrictMode; // true
    
  104. ```