diff --git a/packages/react-is/README.md b/packages/react-is/README.md index 1af87184a233e..58aa9d0c2676e 100644 --- a/packages/react-is/README.md +++ b/packages/react-is/README.md @@ -11,7 +11,7 @@ import {isAsyncMode, typeOf} from 'react-is'; const AsyncMode = React.unstable_AsyncMode; -typeOf(); // "ReactAsyncMode" +typeOf(); // ReactIs.AsyncMode isAsyncMode(); // true ``` @@ -23,8 +23,8 @@ import {isContextConsumer, isContextProvider, typeOf} from 'react-is'; const ThemeContext = React.createContext('blue'); -typeOf(); // "ReactContextProvider" -typeOf(); // "ReactContextConsumer" +typeOf(); // ReactIs.ContextProvider +typeOf(); // ReactIs.ContextConsumer isContextConsumer(); // true isContextProvider(); // true @@ -35,7 +35,7 @@ isContextProvider(); // true import React from 'react'; import {isElement, typeOf} from 'react-is'; -typeOf(
); // "ReactElement" +typeOf(
); // ReactIs.Element isElement(
); // true ``` @@ -45,7 +45,7 @@ isElement(
); // true import React from 'react'; import {isFragment, typeOf} from 'react-is'; -typeOf(<>); // "ReactFragment" +typeOf(<>); // ReactIs.Fragment isFragment(<>); // true ``` @@ -59,7 +59,7 @@ import {isPortal, typeOf} from 'react-is'; const div = document.createElement('div'); const portal = createPortal(
, div); -typeOf(portal); // "ReactPortal" +typeOf(portal); // ReactIs.Portal isPortal(portal); // true ``` @@ -69,7 +69,7 @@ isPortal(portal); // true import React from 'react'; import {isStrictMode, typeOf} from 'react-is'; -typeOf(); // "ReactStrictMode" +typeOf(); // ReactIs.StrictMode isStrictMode(); // true ``` \ No newline at end of file diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js index 605a6bd2afb47..4dd1274a709d4 100644 --- a/packages/react-is/src/ReactIs.js +++ b/packages/react-is/src/ReactIs.js @@ -41,29 +41,37 @@ function getTypeTypeOf(object: any) { const ReactIs = { typeOf(object: any) { - switch (getType(object)) { + const type = getType(object); + switch (type) { case REACT_ASYNC_MODE_TYPE: - return 'ReactAsyncMode'; case REACT_FRAGMENT_TYPE: - return 'ReactFragment'; case REACT_STRICT_MODE_TYPE: - return 'ReactStrictMode'; + return type; } - switch (getTypeTypeOf(object)) { + const typeTypeOf = getTypeTypeOf(object); + switch (typeTypeOf) { case REACT_CONTEXT_TYPE: - return 'ReactContextConsumer'; case REACT_PROVIDER_TYPE: - return 'ReactContextProvider'; + return typeTypeOf; } - switch (getTypeOf(object)) { + const typeOf = getTypeOf(object); + switch (typeOf) { case REACT_ELEMENT_TYPE: - return 'ReactElement'; case REACT_PORTAL_TYPE: - return 'ReactPortal'; + return typeOf; } }, + + AsyncMode: REACT_ASYNC_MODE_TYPE, + ContextConsumer: REACT_CONTEXT_TYPE, + ContextProvider: REACT_PROVIDER_TYPE, + Element: REACT_ELEMENT_TYPE, + Fragment: REACT_FRAGMENT_TYPE, + Portal: REACT_PORTAL_TYPE, + StrictMode: REACT_STRICT_MODE_TYPE, + isAsyncMode(object: any) { return getType(object) === REACT_ASYNC_MODE_TYPE; }, diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js index d01132668f4a3..6d4c4db896234 100644 --- a/packages/react-is/src/__tests__/ReactIs-test.js +++ b/packages/react-is/src/__tests__/ReactIs-test.js @@ -22,7 +22,9 @@ describe('ReactIs', () => { }); it('should identify async mode', () => { - expect(ReactIs.typeOf()).toBe('ReactAsyncMode'); + expect(ReactIs.typeOf()).toBe( + ReactIs.AsyncMode, + ); expect(ReactIs.isAsyncMode()).toBe(true); expect(ReactIs.isAsyncMode()).toBe(false); expect(ReactIs.isAsyncMode(
)).toBe(false); @@ -30,7 +32,7 @@ describe('ReactIs', () => { it('should identify context consumers', () => { const Context = React.createContext(false); - expect(ReactIs.typeOf()).toBe('ReactContextConsumer'); + expect(ReactIs.typeOf()).toBe(ReactIs.ContextConsumer); expect(ReactIs.isContextConsumer()).toBe(true); expect(ReactIs.isContextConsumer()).toBe(false); expect(ReactIs.isContextConsumer(
)).toBe(false); @@ -38,14 +40,14 @@ describe('ReactIs', () => { it('should identify context providers', () => { const Context = React.createContext(false); - expect(ReactIs.typeOf()).toBe('ReactContextProvider'); + expect(ReactIs.typeOf()).toBe(ReactIs.ContextProvider); expect(ReactIs.isContextProvider()).toBe(true); expect(ReactIs.isContextProvider()).toBe(false); expect(ReactIs.isContextProvider(
)).toBe(false); }); it('should identify elements', () => { - expect(ReactIs.typeOf(
)).toBe('ReactElement'); + expect(ReactIs.typeOf(
)).toBe(ReactIs.Element); expect(ReactIs.isElement(
)).toBe(true); expect(ReactIs.isElement('div')).toBe(false); expect(ReactIs.isElement(true)).toBe(false); @@ -53,7 +55,7 @@ describe('ReactIs', () => { }); it('should identify fragments', () => { - expect(ReactIs.typeOf()).toBe('ReactFragment'); + expect(ReactIs.typeOf()).toBe(ReactIs.Fragment); expect(ReactIs.isFragment()).toBe(true); expect(ReactIs.isFragment('React.Fragment')).toBe(false); expect(ReactIs.isFragment(
)).toBe(false); @@ -63,13 +65,13 @@ describe('ReactIs', () => { it('should identify portals', () => { const div = document.createElement('div'); const portal = ReactDOM.createPortal(
, div); - expect(ReactIs.typeOf(portal)).toBe('ReactPortal'); + expect(ReactIs.typeOf(portal)).toBe(ReactIs.Portal); expect(ReactIs.isPortal(portal)).toBe(true); expect(ReactIs.isPortal(div)).toBe(false); }); it('should identify strict mode', () => { - expect(ReactIs.typeOf()).toBe('ReactStrictMode'); + expect(ReactIs.typeOf()).toBe(ReactIs.StrictMode); expect(ReactIs.isStrictMode()).toBe(true); expect(ReactIs.isStrictMode()).toBe(false); expect(ReactIs.isStrictMode(
)).toBe(false);