Get around a warning when using useLayoutEffect on the server

Author: szhsin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@szhsin/react-menu",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An accessible, responsive, and customisable React menu library.",
   "author": "Zheng Song",
   "license": "MIT",

src/components/MenuList.js

@@ -2,7 +2,6 @@ import React, {
     useState,
     useReducer,
     useEffect,
-    useLayoutEffect,
     useRef,
     useMemo,
     useCallback,
@@ -21,7 +20,8 @@ import {
     CloseReason,
     Keys,
     FocusPositions,
-    HoverIndexActionTypes
+    HoverIndexActionTypes,
+    useLayoutEffect
 } from '../utils';
 
 

src/utils/index.js

@@ -5,3 +5,4 @@ export * from './useActiveState';
 export * from './useItemState';
 export * from './useMenuChange';
 export * from './useMenuState';
+export * from './useIsomorphicLayoutEffect';

src/utils/useIsomorphicLayoutEffect.js

@@ -0,0 +1,15 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+// Get around a warning when using useLayoutEffect on the server.
+// https://github.com/reduxjs/react-redux/blob/b48d087d76f666e1c6c5a9713bbec112a1631841/src/utils/useIsomorphicLayoutEffect.js#L12
+// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+// https://github.com/facebook/react/issues/14927#issuecomment-549457471
+
+const useIsomorphicLayoutEffect =
+    typeof window !== 'undefined' &&
+        typeof window.document !== 'undefined' &&
+        typeof window.document.createElement !== 'undefined'
+        ? useLayoutEffect
+        : useEffect;
+
+export { useIsomorphicLayoutEffect as useLayoutEffect };