Hi team.
I made a ternary Darkmode (based on this repo) like "dark" | "system" | "light" in a project and I want to use it in another project.
The best way to share it is to upload it on NPM and GitHub. And I think putting it here might be helpful, as I see you have " Add new hooks" in your roadmap. Questions are:

1. Is this too trivial to add?
2. Can I make a PR on this repo?
3. Do you have a Code of Conduct?

Thanks.

Was looking through this lib and it looks awesome. In a project on my team, we have a version of the useInterval hook from Dan's blog post, but we made a small modification to it. We added the ability for the callback to be executed right away.

function useInterval(callback, delay: number | null, runNow=false) {
  ...
  
  useEffect(() => {
    if (runNow && savedCallback.current) {
      savedCallback.current()
    } else return
  }, [runNow])
  
  ...
}

This has been useful for a handful of things. It seems like it would be generally useful, so I'm surprised that this isn't apart of the spec. But I'm guessing I'm just missing something simple with the useHooks-ts version to accomplish the same thing?

https://gist.github.com/jaydenseric/a67cfb1b809b1b789daa17dfe6f83daa

or https://github.com/jmlweb/isMounted for non state

Dear usehooks-ts maintainers,
Thank you for your contribution to the open-source community.

This issue was automatically created to inform you a new version (2.2.1) of usehooks-ts was published without a matching tag in this repo.

Our service monitors the open-source ecosystem and informs popular packages' owners in case of potentially harmful activity.
If you find this behavior legitimate, kindly close and ignore this issue. Read more

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update dependency rimraf to v6
• Update dependency vitest to v2
• Update turbo monorepo to v2 (major) (@turbo/gen, turbo)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update all non-major dependencies (@t3-oss/env-core, @t3-oss/env-nextjs, @types/node, @types/react, @types/react-dom, eslint-config-next, eslint-plugin-vitest, lucide-react, next, postcss, react, react-dom, tailwindcss, typedoc, typescript, zod)
• Update dependency @testing-library/react to v16
• Update dependency eslint to v9
• Update dependency next-mdx-remote to v5
• Update dependency remark-gfm to v4
• Update dependency typedoc-plugin-markdown to v4
• Update dependency typedoc-plugin-missing-exports to v3
• Update dependency zx to v8
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I can't find this library on npm. Please add installation instruction.

Can anyone tell me? Why can't we just return isMounted.current and what is the purpose of using usecallback to wrap?

Hello!

I'm using a create-react-app (react ^17.0.2) and a storybook (^6.3.4)
If I'm trying to use the useLocalStorage hook, my storybooks fails (all my development is done in the storybook).

I get this error:

ERROR in ./node_modules/usehooks-ts/dist/esm/useElementSize/useElementSize.js 11:23
Module parse failed: Unexpected token (11:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const handleSize = useCallback(() => {
|         setSize({
>             width: ref?.offsetWidth || 0,
|             height: ref?.offsetHeight || 0,
|         });
 @ ./node_modules/usehooks-ts/dist/esm/useElementSize/index.js 1:0-61 1:0-61 2:0-33 2:0-33
 @ ./node_modules/usehooks-ts/dist/esm/index.js
 @ ./src/layouts/notes/notes.tsx
 @ ./src/layouts/notes/notes.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/usehooks-ts/dist/esm/useScript/useScript.js 17:23
Module parse failed: Unexpected token (17:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|             document.body.appendChild(script);
|             const setAttributeFromEvent = (event) => {
>                 script?.setAttribute('data-status', event.type === 'load' ? 'ready' : 'error');
|             };
|             script.addEventListener('load', setAttributeFromEvent);
 @ ./node_modules/usehooks-ts/dist/esm/useScript/index.js 1:0-51 1:0-51 2:0-28 2:0-28
 @ ./node_modules/usehooks-ts/dist/esm/index.js
 @ ./src/layouts/notes/notes.tsx
 @ ./src/layouts/notes/notes.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/usehooks-ts/dist/esm/useLocalStorage/useLocalStorage.js 45:69
Module parse failed: Unexpected token (45:69)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function parseJSON(value) {
|     try {
>         return value === 'undefined' ? undefined : JSON.parse(value ?? '');
|     }
|     catch (error) {
 @ ./node_modules/usehooks-ts/dist/esm/useLocalStorage/index.js 1:0-63 1:0-63 2:0-34 2:0-34
 @ ./node_modules/usehooks-ts/dist/esm/index.js
 @ ./src/layouts/notes/notes.tsx
 @ ./src/layouts/notes/notes.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/usehooks-ts/dist/esm/useOnClickOutside/useOnClickOutside.js 4:23
Module parse failed: Unexpected token (4:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function useOnClickOutside(ref, handler, mouseEvent = 'mousedown') {
|     useEventListener(mouseEvent, event => {
>         const el = ref?.current;
|         if (!el || el.contains(event.target)) {
|             return;
 @ ./node_modules/usehooks-ts/dist/esm/useOnClickOutside/index.js 1:0-67 1:0-67 2:0-36 2:0-36
 @ ./node_modules/usehooks-ts/dist/esm/index.js
 @ ./src/layouts/notes/notes.tsx
 @ ./src/layouts/notes/notes.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/usehooks-ts/dist/esm/useIntersectionObserver/useIntersectionObserver.js 4:25
Module parse failed: Unexpected token (4:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function useIntersectionObserver(elementRef, { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false, }) {
|     const [entry, setEntry] = useState();
>     const frozen = entry?.isIntersecting && freezeOnceVisible;
|     const updateEntry = ([entry]) => {
|         setEntry(entry);
 @ ./node_modules/usehooks-ts/dist/esm/useIntersectionObserver/index.js 1:0-79 1:0-79 2:0-42 2:0-42
 @ ./node_modules/usehooks-ts/dist/esm/index.js
 @ ./src/layouts/notes/notes.tsx
 @ ./src/layouts/notes/notes.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/usehooks-ts/dist/esm/useCopyToClipboard/useCopyToClipboard.js 5:23
Module parse failed: Unexpected token (5:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const [copiedText, setCopiedText] = useState(null);
|     const copy = async (text) => {
>         if (!navigator?.clipboard) {
|             console.warn('Clipboard not supported');
|             return false;
 @ ./node_modules/usehooks-ts/dist/esm/useCopyToClipboard/index.js 1:0-69 1:0-69 2:0-37 2:0-37
 @ ./node_modules/usehooks-ts/dist/esm/index.js
 @ ./src/layouts/notes/notes.tsx
 @ ./src/layouts/notes/notes.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/usehooks-ts/dist/esm/useEventListener/useEventListener.js 5:38
Module parse failed: Unexpected token (5:38)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const savedHandler = useRef();
|     useEffect(() => {
>         const targetElement = element?.current || window;
|         if (!(targetElement && targetElement.addEventListener)) {
|             return;
 @ ./node_modules/usehooks-ts/dist/esm/useEventListener/index.js 1:0-65 1:0-65 2:0-35 2:0-35
 @ ./node_modules/usehooks-ts/dist/esm/index.js
 @ ./src/layouts/notes/notes.tsx
 @ ./src/layouts/notes/notes.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/usehooks-ts/dist/esm/useDarkMode/useDarkMode.js 7:80
Module parse failed: Unexpected token (7:80)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function useDarkMode(defaultValue) {
|     const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);
>     const [isDarkMode, setDarkMode] = useLocalStorage('darkMode', defaultValue ?? isDarkOS ?? false);
|     useUpdateEffect(() => {
|         setDarkMode(isDarkOS);
 @ ./node_modules/usehooks-ts/dist/esm/useDarkMode/index.js 1:0-55 1:0-55 2:0-30 2:0-30
 @ ./node_modules/usehooks-ts/dist/esm/index.js
 @ ./src/layouts/notes/notes.tsx
 @ ./src/layouts/notes/notes.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-server/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

Do you know why? And how I can solve it?

Thanks!

Hi,

I know this is not really a good practice to allow an old release of a vendor dependency, but as described on the official blog posts, react 17 does not has "real breaking change" as it's a preparation state for react 18.

For now, many libraries and popular react ecosystem tools looks "not ready" to react 17, according to the NPM numerous conflict issues.

Allowing react 16 will allow more integration of your library during this period without the dependencies conflict problematic.
Plus, no code adaption should be required, but I can not be 100% sure at this point.

May you consider this request?

Regards

usually in the first cycle the element ref is null and even though a ref element is present it will attach a listener to the window object. If ref is given it should wait until ref.current is available before attaching any events

To dynamically import("./bleh")

First of all, well done on this library, it looks very useful, thank you very much!

As to useInterval hook, it probably should be using useLayoutEffect when saving the callback ref:

  useLayoutEffect(() => {
    savedCallback.current = callback
  }, [callback])

Here is the reasoning behind it.

Disclaimer: I'm not in that thread, but I had found it as I came to the same conclusion.

This great repo sounds like a great candidate for publishing on npm for easier updating and security auditing. If someone knows how to set it up, it could also support tree shaking, since each of the hooks is in its own file.

What do you think?

I want to wrap useFetch to do lazy loading fetch.

import { State, useBoolean } from "usehooks-ts";
import React from "react";

const setFetch: React.useState<State | undefined>(undefined);
const isClicked = useBoolean();

React.useEffect(
    function () {
      if(isClicked.value) {
        setFetch(useFetch<whatever>(url)
      }
    }
    [isClicked, setFetch],
);

When using the hook useDarkMode and I presume it could be the same issue for other hooks with Next.js framework and Material-UI, I get the error message: Prop className did not match.

In the console log, the error refer to the documentation: https://nextjs.org/docs/messages/react-hydration-error

Here is my current code generating this error:

const { isDarkMode } = useDarkMode()

const theme = useMemo(
    () =>
      createTheme(themeOptions(isDarkMode ? 'dark' : 'light')),
    [isDarkMode]
  )

The way I was able to fix this error to happen was changing my code to:

  const [dark, setDark] = useState(false)
  const { isDarkMode } = useDarkMode()

  useEffect(() => {
    setDark(isDarkMode)
  }, [isDarkMode])

  const theme = useMemo(
    () =>
      createTheme(themeOptions(dark ? 'dark' : 'light')),
    [dark]
  )

I do not know if this error is actually related to the hooks or maybe with the useMemo hook instead!

https://stackoverflow.com/questions/48846289/why-is-my-react-component-is-rendering-twice

The setValue for useLocalStorage should be stored in a ref and a callback should be returned that invokes that ref i.e.

const setValueRef = useRef();

setValueRef.current = (value) => { ... } // existing logic goes here

const setValue = useCallback((value) => setValueRef.current?.(value), []);

This allows that setValue (like setValue returned from useState is referentially stable and does not need to be included as a dep in functions wrapped in useCallback that use this method.

It is only after resizing the browser window that the size is correct. This means initial render you get size 0 and can't style it in a custom way. How do you work around this?

Hey,

Nice work on this man. I would really like to use this in ongoing projects.. Any way to use this in an ongoing projects? Like using this directly from npmjs?

Thanks.

Hello there!

There is an error I can see after the recent changes made to the ESM/CJS build setup.
It takes place when I try to execute npm run build with NODE_ENV=production. Here is the output:

#29 2.550 Creating an optimized production build...
#29 40.40 Failed to compile.
#29 40.40 
#29 40.40 ./node_modules/usehooks-ts/dist/esm/useLocalStorage/useLocalStorage.js 53:65
#29 40.40 Module parse failed: Unexpected token (53:65)
#29 40.40 File was processed with these loaders:
#29 40.40  * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
#29 40.40 You may need an additional loader to handle the result of these loaders.
#29 40.40 | function parseJSON(value) {
#29 40.40 |   try {
#29 40.40 >     return value === 'undefined' ? undefined : JSON.parse(value ?? '');
#29 40.40 |   } catch (error) {
#29 40.40 |     console.log('parsing error on', {
#29 40.40 
#29 40.40 

I went down to the node_modules/usehooks-ts/dist/ folder and checked if there is any difference between the latest and the workable versions. There was a difference indeed:

In the latest 2.3.0, it was exactly as it is shown above:

try {
  return value === 'undefined' ? undefined : JSON.parse(value ?? '');
}

However in the last working 2.2.1, it was precompiled:

try {
  return value === 'undefined' ? undefined : JSON.parse(value !== null && value !== void 0 ? value : '');
}

I guess I could include the package in my local babel pipeline to mitigate the issue.
However, I'm not an expert in modern js build things and I'm not sure whether this issue should be solved on my side or yours.

Next JS prebuilds pages, so when using the useLocalStorage hook it creates a warning link

Warning: Text content did not match. Server: "Initial Value" Client: "Stored Value"

When a state can be undefined, this hook does not support setting an undefined value.

In this example, you can set state to a string, but if you set it to undefined it will just return the initial value

import useLocalStorage from "app/hooks/useLocalStorage"

export default function Test() {
  const [state, setState] = useLocalStorage<string | undefined>("someKey", "initial")

  return (
    <div>
      <button onClick={() => setState("new value")}>String</button>
      <button onClick={() => setState(undefined)}>undefined</button>
      {state}
    </div>
  )
}

This is because of this line in the code where if item does not exist we do not parse it.

return item ? (JSON.parse(item) as T) : initialValue

funnily enough undefined cannot be stored in localstorage, so it gets set as "undefined" and then causes a JSON.parse error that means we return the initial value anyway.

The useInterval hook does not compile as written. Currently getting:

Not all code paths return a value

Actually I am using useLocalStorage and writing unit tests around it and I am getting below error. I am using Jest & react-testing-library.

/node_modules/react-dom/cjs/react-dom.development.js:3905
      var evt = document.createEvent('Event');
                         ^

TypeError: Cannot read property 'createEvent' of null

Hi there! Really impressed by this collection of hooks, nice work, and thanks for sharing!

I'd love to see a useSessionStorage hook alongside useLocalStorage and wanted to add a note here to add one. If I get time I may PR one, but no promises :)

I couldn't find any well-supported hooks that support local and session storage both, but your useLocalStorage hook seems like one of the more solid ones.

Thank you 🎉

17:37:06.484 Initializing build environment. This may take up to a few minutes to complete
17:39:30.143 Success: Finished initializing build environment
17:39:30.143 Cloning repository...
17:39:34.249 Success: Finished cloning repository files
17:39:35.123 Installing dependencies
17:39:35.126 Python version set to 2.7
17:39:36.152 Downloading and installing node v12.22.0...
17:39:36.313 Downloading https://nodejs.org/dist/v12.22.0/node-v12.22.0-linux-x64.tar.xz...
17:39:36.528 Computing checksum with sha256sum
17:39:36.634 Checksums matched!
17:39:38.947 Now using node v12.22.0 (npm v6.14.11)
17:39:39.041 Started restoring cached build plugins
17:39:39.044 Finished restoring cached build plugins
17:39:39.196 Attempting ruby version 2.7.1, read from environment
17:39:40.388 Using ruby version 2.7.1
17:39:40.706 Using PHP version 5.6
17:39:40.744 5.2 is already installed.
17:39:40.751 Using Swift version 5.2
17:39:40.752 Started restoring cached node modules
17:39:40.755 Finished restoring cached node modules
17:39:40.973 Installing NPM modules using NPM version 6.14.11
17:39:42.801 npm WARN deprecated @material-ui/[email protected]: You can now upgrade to @mui/material. See the guide: https://mui.com/guides/migration-v4/
17:39:42.818 npm WARN deprecated @material-ui/[email protected]: You can now upgrade to @mui/icons. See the guide: https://mui.com/guides/migration-v4/
17:39:43.508 npm WARN deprecated @material-ui/[email protected]: You can now upgrade to @mui/system. See the guide: https://mui.com/guides/migration-v4/
17:39:44.436 npm WARN deprecated @material-ui/[email protected]: You can now upgrade to @mui/styles. See the guide: https://mui.com/guides/migration-v4/
17:40:07.346
17:40:07.346 > @fortawesome/[email protected] postinstall /opt/buildhome/repo/node_modules/@fortawesome/fontawesome-common-types
17:40:07.346 > node attribution.js
17:40:07.346
17:40:07.401 Font Awesome Free 0.3.0 by @FontAwesome - https://fontawesome.com
17:40:07.401 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
17:40:07.401 Copyright {{currentYear}} Fonticons, Inc.
17:40:07.401
17:40:07.414
17:40:07.414 > @fortawesome/[email protected] postinstall /opt/buildhome/repo/node_modules/@fortawesome/free-brands-svg-icons/node_modules/@fortawesome/fontawesome-common-types
17:40:07.414 > node attribution.js
17:40:07.414
17:40:07.472 Font Awesome Free 0.2.36 by @FontAwesome - https://fontawesome.com
17:40:07.472 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
17:40:07.472
17:40:07.479
17:40:07.479 > @fortawesome/[email protected] postinstall /opt/buildhome/repo/node_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-types
17:40:07.479 > node attribution.js
17:40:07.479
17:40:07.547 Font Awesome Free 0.2.36 by @FontAwesome - https://fontawesome.com
17:40:07.548 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
17:40:07.548
17:40:07.560
17:40:07.560 > @fortawesome/[email protected] postinstall /opt/buildhome/repo/node_modules/font-awesome-5-pro-regular/node_modules/@fortawesome/fontawesome-common-types
17:40:07.560 > node attribution.js
17:40:07.560
17:40:07.617 Font Awesome Free 0.2.36 by @FontAwesome - https://fontawesome.com
17:40:07.617 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
17:40:07.617
17:40:07.638
17:40:07.638 > @fortawesome/[email protected] postinstall /opt/buildhome/repo/node_modules/@fortawesome/fontawesome-svg-core
17:40:07.638 > node attribution.js
17:40:07.638
17:40:07.696 Font Awesome Free 1.3.0 by @FontAwesome - https://fontawesome.com
17:40:07.696 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
17:40:07.696 Copyright {{currentYear}} Fonticons, Inc.
17:40:07.696
17:40:07.704
17:40:07.704 > @fortawesome/[email protected] postinstall /opt/buildhome/repo/node_modules/@fortawesome/free-brands-svg-icons
17:40:07.704 > node attribution.js
17:40:07.704
17:40:07.761 Font Awesome Free 5.15.4 by @FontAwesome - https://fontawesome.com
17:40:07.761 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
17:40:07.761
17:40:07.772
17:40:07.772 > @fortawesome/[email protected] postinstall /opt/buildhome/repo/node_modules/@fortawesome/free-solid-svg-icons
17:40:07.772 > node attribution.js
17:40:07.772
17:40:07.826 Font Awesome Free 5.15.4 by @FontAwesome - https://fontawesome.com
17:40:07.826 License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
17:40:07.826
17:40:07.834
17:40:07.834 > [email protected] postinstall /opt/buildhome/repo/node_modules/font-awesome-5-pro-regular
17:40:07.834 > node attribution.js
17:40:07.834
17:40:07.893 Font Awesome Pro 5.15.2 by @FontAwesome - https://fontawesome.com
17:40:07.893 License - https://fontawesome.com/license (Commercial License)
17:40:07.893
17:40:08.055 npm notice created a lockfile as package-lock.json. You should commit this file.
17:40:08.062 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/next/node_modules/@next/swc-android-arm64):
17:40:08.062 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"android","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
17:40:08.068 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/next/node_modules/@next/swc-darwin-arm64):
17:40:08.068 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
17:40:08.074 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/next/node_modules/@next/swc-darwin-x64):
17:40:08.074 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"darwin","arch":"x64"} (current: {"os":"linux","arch":"x64"})
17:40:08.080 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/next/node_modules/@next/swc-linux-arm-gnueabihf):
17:40:08.080 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"linux","arch":"arm"} (current: {"os":"linux","arch":"x64"})
17:40:08.085 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/next/node_modules/@next/swc-linux-arm64-gnu):
17:40:08.085 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
17:40:08.091 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/next/node_modules/@next/swc-linux-arm64-musl):
17:40:08.091 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"linux","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
17:40:08.096 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/next/node_modules/@next/swc-win32-arm64-msvc):
17:40:08.096 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"win32","arch":"arm64"} (current: {"os":"linux","arch":"x64"})
17:40:08.102 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/next/node_modules/@next/swc-win32-ia32-msvc):
17:40:08.102 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"win32","arch":"ia32"} (current: {"os":"linux","arch":"x64"})
17:40:08.109 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/[email protected] (node_modules/next/node_modules/@next/swc-win32-x64-msvc):
17:40:08.109 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/[email protected]: wanted {"os":"win32","arch":"x64"} (current: {"os":"linux","arch":"x64"})
17:40:08.120 npm WARN [email protected] requires a peer of react@^0.14 || ^15.0.0-rc || ^15.0 || ^16.0.0 || ^16.0 but none is installed. You must install peer dependencies yourself.
17:40:08.129 npm WARN [email protected] requires a peer of react-dom@^0.14 || ^15.0.0-rc || ^15.0 || ^16.0.0 || ^16.0 but none is installed. You must install peer dependencies yourself.
17:40:08.139 npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
17:40:08.140
17:40:08.142 added 170 packages from 198 contributors and audited 180 packages in 26.371s
17:40:08.245
17:40:08.245 19 packages are looking for funding
17:40:08.245 run npm fund for details
17:40:08.245
17:40:08.245 found 0 vulnerabilities
17:40:08.246
17:40:08.278 NPM modules installed
17:40:08.555 Installing Hugo 0.54.0
17:40:09.237 Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z
17:40:09.238 Started restoring cached go cache
17:40:09.242 Finished restoring cached go cache
17:40:09.274 go version go1.14.4 linux/amd64
17:40:09.280 go version go1.14.4 linux/amd64
17:40:09.282 Installing missing commands
17:40:09.282 Verify run directory
17:40:09.282 Executing user command: next build && next export
17:40:10.068 warn - SWC minify release candidate enabled. https://nextjs.org/docs/messages/swc-minify-enabled
17:40:10.072 warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
17:40:10.093 Attention: Next.js now collects completely anonymous telemetry regarding usage.
17:40:10.093 This information is used to shape Next.js' roadmap and prioritize features.
17:40:10.093 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
17:40:10.093 https://nextjs.org/telemetry
17:40:10.093
17:40:10.147 info - Checking validity of types...
17:40:10.275 warn - No ESLint configuration detected. Run next lint to begin setup
17:40:10.281 info - Creating an optimized production build...
17:40:31.923 info - Compiled successfully
17:40:31.924 info - Collecting page data...
17:40:33.958
17:40:33.958 > Build error occurred
17:40:33.962 /opt/buildhome/repo/node_modules/usehooks-ts/dist/cjs/useEventListener/useEventListener.js:7
17:40:33.962 const targetElement = element?.current || window;
17:40:33.962 ^
17:40:33.962
17:40:33.962 SyntaxError: Unexpected token '.'
17:40:33.962 at wrapSafe (internal/modules/cjs/loader.js:915:16)
17:40:33.962 at Module._compile (internal/modules/cjs/loader.js:963:27)
17:40:33.962 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
17:40:33.962 at Module.load (internal/modules/cjs/loader.js:863:32)
17:40:33.962 at Function.Module._load (internal/modules/cjs/loader.js:708:14)
17:40:33.962 at Module.require (internal/modules/cjs/loader.js:887:19)
17:40:33.962 at require (internal/modules/cjs/helpers.js:74:18)
17:40:33.962 at Object. (/opt/buildhome/repo/node_modules/usehooks-ts/dist/cjs/useEventListener/index.js:17:26)
17:40:33.962 at Module._compile (internal/modules/cjs/loader.js:999:30)
17:40:33.962 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) {
17:40:33.962 type: 'SyntaxError'
17:40:33.962 }
17:40:34.007 Failed: build command exited with code: 1

userInterval says that it is "very similar to the useInterval hook". By my comparison they are exactly the same (except for the name).

Hi :)

What if i need an event bubbling ?

targetElement.addEventListener(eventName, eventListener, bubbling || false) return () => { targetElement.removeEventListener(eventName, eventListener, bubbling || false) } }, [eventName, element])

I see in v1.0.8 that the react dependency was changed to ^16.8.0 but I believe this was done in error since the package does not support projects that use v17+. I believe this can be fixed with an easy change:

"dependencies": {
  "react": ">=16.8.0",
},
"peerDependencies": {
  "react": ">=16.8.0",
}

Let me know if you'd like me to submit a PR for this

The setValue setter function returned by useLocalStorage is re-evaluated every time,
resulting in a lot of re-writes when it is specified as a dependency of an effect or callback (while skipping including it as dependency sometimes results in missing storage write).

I suspect it should be wrapped in something like useCallback(..., [setStoredValue]) to return a more "stable" object avoiding that issue.

About useIntersectionObserver

passing threshold as an array of positions to observe will result in endless state changes, as every entry differs and the whole entry is set to the state:

const entry = useIntersectionObserver(ref, { threshold: [0.2, 0.4, 0.6] })

There should be a condition to set a new state only if relevant changes have happened...

In the example of useDarkMode() hook, when I click the button, the text color and the background color doesn't change. Please fix it, preferably using tailwind classes

About the localStorage hook: if you just want to access a value from localStorage, you're still forced to pass an initial value - is that correct? How do you go around that?

https://usehooks-typescript.com/react-hook/use-local-storage

My linter is kicking up a fuss on the useLocalStorage hook:

Line 17:7:  Unsafe return of an any typed value  @typescript-eslint/no-unsafe-return

My .eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'react-app',
    'react-app/jest',
    'plugin:@typescript-eslint/recommended',
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/no-empty-interface': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
  },
}

And .tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

Is there any way to get the hook to work under these conditions?

In useIsMounted, the function returns () => isMounted.current. Then in the usage example, when this function is invoked in a useEffect, the eslint disable flag // eslint-disable-next-line react-hooks/exhaustive-deps is used as it would otherwise warn that isMounted should be included (which would cause a loop as it changes on every render).

Instead, should the useIsMounted hook not wrap the return function in a useCallback? i.e. return useCallback(() => mounted.current, []); ?

This seems to work well on my project.

With this change: #143 The useEffectOnce hook now no longer calls the cleanup function:

import { useState, useEffect } from "react";
import { useEffectOnce } from "usehooks-ts";

function SubComponent() {
  // This useEffect code works as expected, but in strict mode gets run twice
  // useEffect(() => {
  //   console.log("useEffect Mounted");
  //   return () => {
  //     console.log("useEffect Unmounted");
  //   };
  // });
  
  useEffectOnce(() => {
    console.log("useEffectOnce Mounted");
    return () => {
      // This never gets called
      console.log("useEffectOnce Unmounted");
    };
  });
  
  return <div>Hello</div>;
}

function App() {
  const [mounted, setMounted] = useState(true);
  return (
    <div>
      <button onClick={() => setMounted(false)}>Unmount</button>
      {mounted && <SubComponent />}
    </div>
  );
}

You can try this out live here:

https://codesandbox.io/s/angry-diffie-fj3ek6?file=/src/App.js

This fix comes from a blog post on AG-Grid that I think is also in error. That code assumes that the custom hook gets called to set renderAfterCalled to true, probably on the assumption that putting a console.log at that point will show it getting called twice, but it really doesn't get called twice, that second log is just react-devtools.

I actually have no idea about how to fix this the right way. There doesn't seem to be a way to detect strict mode, safely, externally to React.

I used the useHover code in a project--thank you!--and noticed one downside. Because mouseover and mouseout are used for the event listeners, there is a lot of fluttering back-and-forth between true and false because these events trigger not just when entering and leaving the element in question but also when entering and leaving any child of that element.

In my case, I had the useHover hook on an icon button, and the hover value would flip back and forth when the cursor was already inside the button but moving back and forth over the icon! Needless to say, this behavior was unexpected to me, but easily resolved by moving from over to enter and out to leave.

Something to consider!

Thank you for your hard work on this project. :)

Description

A few times I've already discovered that when I'm going to the side and I'm switching between dark mode and light mode it has some issues. Sometimes when I click the button on the navigation it's only changing a particular part of the site or not even doing anything.

Checked

I've already checked if it's happening on localhost, but there I didn't face this problem. It's quite weird for me that it's only happening in production. Maybe someone else could also take a look at what've I found.

Details

When I found this bug I was using Google Chrome, but I also noticed it on phone. I made a short video to illustrate it.

Summary

If elementRef.current within useElementSize starts out as null on initial render (typically because the target element does not render), useElementSize will not update and return the correct element size once elementRef.current changes to a non-null value.

Simplified code example

const FullScreenDialog = ({ open, title, msg }: { open: boolean; title: string; msg: string }) => {
    const hdrRef = useRef(null);
    const { height: winHeight } = useWindowSize();
    const { height: hdrHeight } = useElementSize(hdrRef);

    if (!open) return null;
    return (
        <div>
            <div ref={hdrRef}>{title}</div>
            <div style={{ height: winHeight - hdrHeight, marginTop: hdrHeight }}>{msg}</div>
        </div>
    );
};

Details

I'm using useElementSize in a full screen dialog component similar to the simplified one above. The dialog component starts out as not open (open=false), so on first render, it returns null. This means that the dialog header element I want the size of doesn't render at all on initial render and therefore, elementRef.current is null. The useLayoutEffect within useElementSize runs and calls handleSize, but because elementRef.current is null, setSize does not get called and so useElementSize returns { width: 0, height: 0 }. This is all working as expected so far.

Then, the user clicks a button to open the dialog. So my dialog component re-renders, but now with open=true so it renders to the actual elements of the dialog component. Now elementRef.current becomes an actual node. However, there is nothing that causes handleSize to get called again, so useElementSize will always return { width: 0, height: 0 }. (Note: resizing the window does cause handleSize to get called and then useElementSize returns the correct element size.)

Suggested fix

I believe the fix is simple: add elementRef?.current to the item list in the call to useLayoutEffect. Then, on a subsequent re-render of useElementSize, when elementRef?.current changes from null to non-null, handleSize will get called and the size will be updated.

Other info

This could possibly be related to #32.

I found a mistake in Documentation in https://usehooks-ts.com/react-hook/use-fetch.

Where I found a a tag with wrong href attribute.
Line 4 in useLocalStorage() link is https://usehooks-ts.com/react-hook/use-fetch instead of
https://usehooks-ts.com/react-hooks/use-fetch. Change /react-hook/ as /react-hooks/.

I use useHover in my next app and have this error message:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server 
renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended 
UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. 
See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

Solution:

Something like:

import { useEffect, useLayoutEffect } from 'react';

const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export default useIsomorphicLayoutEffect;

I'm running 2.0.2 just fine and when I upgrad eto 2.2.2:

./node_modules/usehooks-ts/dist/esm/useIntersectionObserver/useIntersectionObserver.js 11:23
Module parse failed: Unexpected token (11:23)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   } = _ref;
|   const [entry, setEntry] = useState();
>   const frozen = entry?.isIntersecting && freezeOnceVisible;
| 
|   const updateEntry = _ref2 => {

I can't find this library on npm. Please add installation instruction.

When the element to be sized is within another element that's conditionally hidden/shown via display none/block, the hook can't determine its size once the parent is visible. If you resize the browser, then the size will be correct at the time of resize. However, if you hide the parent, the element will still report its size as being present.

For my use case, having a non-zero size reported once the parent is hidden isn't a problem, though reporting a size of 0x0 (until browser resize) is a problem. I've forked your hook demo so that it reproduces the issue.

https://codesandbox.io/s/usehooks-ts-react-component-template-forked-tzw9yv?file=/src/App.tsx
Possibly related to #32

setTimeout(callback, 0) will call callback immediately.
I assume that useTimeout(callback, 0) should work the same way.
But it doesn't:

useEffect(() => {
  // Don't schedule if no delay is specified.
  if (!delay) {
    return
  }
  ...
})

https://github.com/juliencrn/usehooks-ts/blob/master/lib/src/useTimeout/useTimeout.ts#L13-L16

It would be nice if it could fallback more gracefully.

For now, I just copied useLocalStorage code and added that inside error catch:

        const newValue = value instanceof Function ? value(storedValue) : value
        setStoredValue(newValue)

Do we have anyway limit key that calls from useLocalStorage? My app has a lot of things that I want to save in local storage.
But I want to use something to limit keys for read-write for example I don't know how to use an enum with useLocalStorage.
I am new to Typescript.

Close: I think I need to learn basic Typescript first.

Hi team.
I'm getting this error with create-react-app 5.0 for all hooks.

WARNING in ./node_modules/usehooks-ts/esm/useWindowSize/useWindowSize.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '$REPO_ROOT/node_modules/usehooks-ts/src/useWindowSize/useWindowSize.ts' file: Error: ENOENT: no such file or directory, open '$REPO_ROOT/node_modules/usehooks-ts/src/useWindowSize/useWindowSize.ts'

And it has been complained a lot here:
facebook/create-react-app#11767

Should we add some source map support?

https://medium.com/swlh/using-es6-map-with-react-state-hooks-800b91eedd5f