From 42116e3e9f2789f14eb92dfd71e10a72c173c085 Mon Sep 17 00:00:00 2001
From: jeetiss <jeetiss@yandex.ru>
Date: Wed, 25 Sep 2019 15:11:57 +0300
Subject: [PATCH] fix ssr warning about useLayoutEffect

---
 src/hooks/index.js                 |  1 +
 src/hooks/use-isomorphic-effect.js | 16 ++++++++++++++++
 src/index.js                       |  7 ++++---
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 src/hooks/use-isomorphic-effect.js

diff --git a/src/hooks/index.js b/src/hooks/index.js
index bbb5c06..99282d5 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -6,3 +6,4 @@ export * from './use-custom-tabs'
 export * from './use-validators'
 export * from './use-deep-effect'
 export * from './use-deep-memo'
+export * from './use-isomorphic-effect'
diff --git a/src/hooks/use-isomorphic-effect.js b/src/hooks/use-isomorphic-effect.js
new file mode 100644
index 0000000..2a49382
--- /dev/null
+++ b/src/hooks/use-isomorphic-effect.js
@@ -0,0 +1,16 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+const isReactNative =
+  typeof global !== 'undefined' &&
+  global.navigator &&
+  global.navigator.product === 'ReactNative'
+
+const isDOM = typeof document !== 'undefined'
+
+/**
+ * Is `useLayoutEffect` in a DOM or React Native environment, otherwise resolves to useEffect
+ * Only useful to avoid the console warning.
+ *
+ * PREFER `useEffect` UNLESS YOU KNOW WHAT YOU ARE DOING.
+ */
+export const useIsomorphicEffect = isDOM || isReactNative ? useLayoutEffect : useEffect
diff --git a/src/index.js b/src/index.js
index 3d80d35..31c402e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
-import React, { useLayoutEffect, forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import { lazy, Suspense } from '@uploadcare/client-suspense'
+import { useIsomorphicEffect } from './hooks'
 
 const Uploader = lazy(() =>
   import(/* webpackChunkName: "ucare-widget-chunk" */ './uploader')
@@ -10,13 +11,13 @@ const Dialog = lazy(() =>
 )
 
 const Config = ({ locale, localeTranslations, localePluralize }) => {
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     window.UPLOADCARE_LIVE = false
     window.UPLOADCARE_MANUAL_START = true
   }, [])
 
   // configurate translations
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     window.UPLOADCARE_LOCALE = window.UPLOADCARE_LOCALE || locale
     window.UPLOADCARE_LOCALE_TRANSLATIONS =
       window.UPLOADCARE_LOCALE_TRANSLATIONS || localeTranslations