├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── 1-useToggle ├── ToggleComponent.js └── useToggle.js ├── 10-useFetch ├── FetchComponent.js └── useFetch.js ├── 11-useScript ├── ScriptComponent.js └── useScript.js ├── 12-useDeepCompareEffect ├── DeepCompareEffectComponent.js └── useDeepCompareEffect.js ├── 13-useEventListener ├── EventListenerComponent.js └── useEventListener.js ├── 14-useOnScreen ├── OnScreenComponent.js └── useOnScreen.js ├── 15-useWindowSize ├── WindowSizeComponent.js └── useWindowSize.js ├── 16-useMediaQuery ├── MediaQueryComponent.js └── useMediaQuery.js ├── 17-useGeolocation ├── GeolocationComponent.js └── useGeolocation.js ├── 18-useStateWithValidation ├── StateWithValidationComponent.js └── useStateWithValidation.js ├── 19-useSize ├── SizeComponent.js └── useSize.js ├── 2-useTimeout ├── TimeoutComponent.js └── useTimeout.js ├── 20-useEffectOnce ├── EffectOnceComponent.js └── useEffectOnce.js ├── 21-useClickOutside ├── ClickOutsideComponent.js └── useClickOutside.js ├── 22-useDarkMode ├── DarkModeComponent.js ├── body.css └── useDarkMode.js ├── 23-useCopyToClipboard ├── CopyToClipboardComponent.js └── useCopyToClipboard.js ├── 24-useCookie ├── CookieComponent.js └── useCookie.js ├── 25-useTranslation ├── TranslationComponent.js ├── translations │ ├── en.json │ ├── index.js │ └── sp.json └── useTranslation.js ├── 26-useOnlineStatus ├── OnlineStatusComponent.js └── useOnlineStatus.js ├── 27-useRenderCount ├── RenderCountComponent.js └── useRenderCount.js ├── 28-useDebugInformation ├── DebugInformationComponent.js └── useDebugInformation.js ├── 29-useHover ├── HoverComponent.js └── useHover.js ├── 3-useDebounce ├── DebounceComponent.js └── useDebounce.js ├── 30-useLongPress.js ├── LongPressComponent.js └── useLongPress.js ├── 4-useUpdateEffect ├── UpdateEffectComponent.js └── useUpdateEffect.js ├── 5-useArray ├── ArrayComponent.js └── useArray.js ├── 6-usePrevious ├── PreviousComponent.js └── usePrevious.js ├── 7-useStateWithHistory ├── StateWithHistoryComponent.js └── useStateWithHistory.js ├── 8-useStorage ├── StorageComponent.js └── useStorage.js ├── 9-useAsync ├── AsyncComponent.js └── useAsync.js ├── App.js └── index.js /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/.gitignore -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/README.md -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/package.json -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/public/index.html -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/public/manifest.json -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/public/robots.txt -------------------------------------------------------------------------------- /src/1-useToggle/ToggleComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/1-useToggle/ToggleComponent.js -------------------------------------------------------------------------------- /src/1-useToggle/useToggle.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/1-useToggle/useToggle.js -------------------------------------------------------------------------------- /src/10-useFetch/FetchComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/10-useFetch/FetchComponent.js -------------------------------------------------------------------------------- /src/10-useFetch/useFetch.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/10-useFetch/useFetch.js -------------------------------------------------------------------------------- /src/11-useScript/ScriptComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/11-useScript/ScriptComponent.js -------------------------------------------------------------------------------- /src/11-useScript/useScript.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/11-useScript/useScript.js -------------------------------------------------------------------------------- /src/12-useDeepCompareEffect/DeepCompareEffectComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/12-useDeepCompareEffect/DeepCompareEffectComponent.js -------------------------------------------------------------------------------- /src/12-useDeepCompareEffect/useDeepCompareEffect.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/12-useDeepCompareEffect/useDeepCompareEffect.js -------------------------------------------------------------------------------- /src/13-useEventListener/EventListenerComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/13-useEventListener/EventListenerComponent.js -------------------------------------------------------------------------------- /src/13-useEventListener/useEventListener.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/13-useEventListener/useEventListener.js -------------------------------------------------------------------------------- /src/14-useOnScreen/OnScreenComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/14-useOnScreen/OnScreenComponent.js -------------------------------------------------------------------------------- /src/14-useOnScreen/useOnScreen.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/14-useOnScreen/useOnScreen.js -------------------------------------------------------------------------------- /src/15-useWindowSize/WindowSizeComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/15-useWindowSize/WindowSizeComponent.js -------------------------------------------------------------------------------- /src/15-useWindowSize/useWindowSize.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/15-useWindowSize/useWindowSize.js -------------------------------------------------------------------------------- /src/16-useMediaQuery/MediaQueryComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/16-useMediaQuery/MediaQueryComponent.js -------------------------------------------------------------------------------- /src/16-useMediaQuery/useMediaQuery.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/16-useMediaQuery/useMediaQuery.js -------------------------------------------------------------------------------- /src/17-useGeolocation/GeolocationComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/17-useGeolocation/GeolocationComponent.js -------------------------------------------------------------------------------- /src/17-useGeolocation/useGeolocation.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/17-useGeolocation/useGeolocation.js -------------------------------------------------------------------------------- /src/18-useStateWithValidation/StateWithValidationComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/18-useStateWithValidation/StateWithValidationComponent.js -------------------------------------------------------------------------------- /src/18-useStateWithValidation/useStateWithValidation.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/18-useStateWithValidation/useStateWithValidation.js -------------------------------------------------------------------------------- /src/19-useSize/SizeComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/19-useSize/SizeComponent.js -------------------------------------------------------------------------------- /src/19-useSize/useSize.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/19-useSize/useSize.js -------------------------------------------------------------------------------- /src/2-useTimeout/TimeoutComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/2-useTimeout/TimeoutComponent.js -------------------------------------------------------------------------------- /src/2-useTimeout/useTimeout.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/2-useTimeout/useTimeout.js -------------------------------------------------------------------------------- /src/20-useEffectOnce/EffectOnceComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/20-useEffectOnce/EffectOnceComponent.js -------------------------------------------------------------------------------- /src/20-useEffectOnce/useEffectOnce.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/20-useEffectOnce/useEffectOnce.js -------------------------------------------------------------------------------- /src/21-useClickOutside/ClickOutsideComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/21-useClickOutside/ClickOutsideComponent.js -------------------------------------------------------------------------------- /src/21-useClickOutside/useClickOutside.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/21-useClickOutside/useClickOutside.js -------------------------------------------------------------------------------- /src/22-useDarkMode/DarkModeComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/22-useDarkMode/DarkModeComponent.js -------------------------------------------------------------------------------- /src/22-useDarkMode/body.css: -------------------------------------------------------------------------------- 1 | body.dark-mode { 2 | background-color: #333; 3 | } -------------------------------------------------------------------------------- /src/22-useDarkMode/useDarkMode.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/22-useDarkMode/useDarkMode.js -------------------------------------------------------------------------------- /src/23-useCopyToClipboard/CopyToClipboardComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/23-useCopyToClipboard/CopyToClipboardComponent.js -------------------------------------------------------------------------------- /src/23-useCopyToClipboard/useCopyToClipboard.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/23-useCopyToClipboard/useCopyToClipboard.js -------------------------------------------------------------------------------- /src/24-useCookie/CookieComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/24-useCookie/CookieComponent.js -------------------------------------------------------------------------------- /src/24-useCookie/useCookie.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/24-useCookie/useCookie.js -------------------------------------------------------------------------------- /src/25-useTranslation/TranslationComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/25-useTranslation/TranslationComponent.js -------------------------------------------------------------------------------- /src/25-useTranslation/translations/en.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/25-useTranslation/translations/en.json -------------------------------------------------------------------------------- /src/25-useTranslation/translations/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/25-useTranslation/translations/index.js -------------------------------------------------------------------------------- /src/25-useTranslation/translations/sp.json: -------------------------------------------------------------------------------- 1 | { 2 | "hi": "Hola" 3 | } -------------------------------------------------------------------------------- /src/25-useTranslation/useTranslation.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/25-useTranslation/useTranslation.js -------------------------------------------------------------------------------- /src/26-useOnlineStatus/OnlineStatusComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/26-useOnlineStatus/OnlineStatusComponent.js -------------------------------------------------------------------------------- /src/26-useOnlineStatus/useOnlineStatus.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/26-useOnlineStatus/useOnlineStatus.js -------------------------------------------------------------------------------- /src/27-useRenderCount/RenderCountComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/27-useRenderCount/RenderCountComponent.js -------------------------------------------------------------------------------- /src/27-useRenderCount/useRenderCount.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/27-useRenderCount/useRenderCount.js -------------------------------------------------------------------------------- /src/28-useDebugInformation/DebugInformationComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/28-useDebugInformation/DebugInformationComponent.js -------------------------------------------------------------------------------- /src/28-useDebugInformation/useDebugInformation.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/28-useDebugInformation/useDebugInformation.js -------------------------------------------------------------------------------- /src/29-useHover/HoverComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/29-useHover/HoverComponent.js -------------------------------------------------------------------------------- /src/29-useHover/useHover.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/29-useHover/useHover.js -------------------------------------------------------------------------------- /src/3-useDebounce/DebounceComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/3-useDebounce/DebounceComponent.js -------------------------------------------------------------------------------- /src/3-useDebounce/useDebounce.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/3-useDebounce/useDebounce.js -------------------------------------------------------------------------------- /src/30-useLongPress.js/LongPressComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/30-useLongPress.js/LongPressComponent.js -------------------------------------------------------------------------------- /src/30-useLongPress.js/useLongPress.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/30-useLongPress.js/useLongPress.js -------------------------------------------------------------------------------- /src/4-useUpdateEffect/UpdateEffectComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/4-useUpdateEffect/UpdateEffectComponent.js -------------------------------------------------------------------------------- /src/4-useUpdateEffect/useUpdateEffect.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/4-useUpdateEffect/useUpdateEffect.js -------------------------------------------------------------------------------- /src/5-useArray/ArrayComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/5-useArray/ArrayComponent.js -------------------------------------------------------------------------------- /src/5-useArray/useArray.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/5-useArray/useArray.js -------------------------------------------------------------------------------- /src/6-usePrevious/PreviousComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/6-usePrevious/PreviousComponent.js -------------------------------------------------------------------------------- /src/6-usePrevious/usePrevious.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/6-usePrevious/usePrevious.js -------------------------------------------------------------------------------- /src/7-useStateWithHistory/StateWithHistoryComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/7-useStateWithHistory/StateWithHistoryComponent.js -------------------------------------------------------------------------------- /src/7-useStateWithHistory/useStateWithHistory.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/7-useStateWithHistory/useStateWithHistory.js -------------------------------------------------------------------------------- /src/8-useStorage/StorageComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/8-useStorage/StorageComponent.js -------------------------------------------------------------------------------- /src/8-useStorage/useStorage.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/8-useStorage/useStorage.js -------------------------------------------------------------------------------- /src/9-useAsync/AsyncComponent.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/9-useAsync/AsyncComponent.js -------------------------------------------------------------------------------- /src/9-useAsync/useAsync.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/9-useAsync/useAsync.js -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/App.js -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/useful-custom-react-hooks/HEAD/src/index.js --------------------------------------------------------------------------------