Thanks for this useful lib, but the docs need some enhancements like getting out of the docusaurus template and maybe make it docs only w/o the landing page, and I'm ready to help! Let me know if there is a room for this enhancement and I will work on it.

testing-library/react-testing-library#1120, Maybe I will write a test library locally

Currently, the implementation and tests
of the same function are stored in different folders, which makes the context of each function more scattered.
If they are moved into the same folder, it can allow each function to be written without jumping between multiple folders.

New structures could be:

└──  useToggle
     ├── index.spec.ts
     └── index.ts

I have a package called @ririd/eslint-config, which has been installed in the root. You can check it and configure more rules as needed.

https://github.com/Daydreamer-riri/eslint-config

When using useLocalStorage, values appear to be safely handled with normal use (as strings with a string default), but cause React render cycle problems if serialization options are used and an object is passed in for the default value.

For example, this works:

const useCompletedForms = () => {
  const [formsRaw, setFormsRaw] = useLocalStorage('completedForms', '[]');
  const completedForms = useMemo(() => JSON.parse(formsRaw ?? '[]'), [formsRaw]);
  const setCompletedForms = useCallback((forms: InputFormV2CompletedForms[]) => {
    setFormsRaw(JSON.stringify(forms));
  }, [setFormsRaw]);
  ...
}

However, this does not:

const completedFormsLocalStorageOpts = { serializer: { read: (raw: string): InputFormV2CompletedForms[] => raw ? JSON.parse(raw) : [], write: (x: InputFormV2CompletedForms[]) => JSON.stringify(x) } };

const useCompletedForms = () => {
  const [completedForms, setCompletedForms] = useLocalStorage('completedForms', [], completedFormsLocalStorageOpts);
  ...
}

In order to fix the above code, I have to use null instead of [] for the defaultValue parameter

This isn't a huge deal, as there's a pretty easy workaround. But at the very least, it would be helpful to note in the documentation until it's fixed, since the TypeScript typing heavily pushes you to use an array if your serializer serializes to an array

In the version 5.0.0 release, support for passing in a DOM HTMLElement directly for the target param of many hooks (such as useElementSize) was dropped in favor of a ref. While the current documentation reflects the update correctly for new users of this library, it would be useful to developers trying to update from 4.0.0 -> 5.0.0 if that change was noted in GitHub's Changelog for that release.

feat(useClickOutside): support enable prop

Write a custom hook like this

const referenceObject = {a: 1}

export default function useMyHook(options: UseMyHookOptions) {
  const {
     someReference  = someOptions
  } = options;

 useEffect(() => {
  // do something
}, [JSON.stringfy(someReference])
}

In all honesty, I think this is somewhat pathological. According to the React pattern, shouldn't we allow users to pass immutable references as arguments?

so we can just write like this

export default function useMyHook(options: UseMyHookOptions) {
  const {
     someReference  = someOptions
  } = options;

 useEffect(() => {
  // do something
}, [someReference)

比如附带相关方法setPosition()来主动更新钩子内部的位置值

While working with some webcam flows in React, I've found that permissions states can be really funky in browsers. Specifically, when first requesting permissions, you don't have access to the proper input device list until the user has granted permissions. Once the user does grant permissions, it doesn't seem to automatically re-trigger the useMediaDevices hook, since that's not directly tied to any permission change events (and can't effectively be since Firefox doesn't support camera/microphone as permissions in the permissions API).

My proposal:

Some sort of optional function that can be used to manually trigger an update on the useMediaDevices check, i.e.

const { devices, reload: reloadDeviceList } = useMediaDevices();
...
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((stream) => {
      stream.getTracks().forEach((track) => track.stop());
      reloadDeviceList();
    })

1. name export instread of export default
2. add params interface and return interface for every single function
3. The type of dom element to be passed?

When used on Chrome, usePermission works as expected, returning prompt when prompting and granted when approved.
When the same code is run in Firefox, however, the hook always returns an empty string.

Code example:

const cameraPermission = usePermission('camera');
const micPermission = usePermission('microphone');
console.log(cameraPermission, micPermission);

Perhaps switching the package manager to pnpm could provide better monorepo support.

I am happy to commit a pull request to complete it.

Hi, @childrentime , I implemented a library with zero configuration to implement SSR for development and SSG for production, and I think the scenario fits well with our documentation station.

Would you be interested in using it?

Here is a version of the documentation that already uses vite-react-ssg.

A. We can add a useCookie hook.

it looks like

const [cookie,setCookie,removeCookie,refreshCookie] = useCookie(key,options,defaultValue)

• The options should take control of cookie attributes like path, expires.
• The defaultValue for the server side. Users should serialize the defaultValue on the server side and provide the same value in client side.
• When a user makes a network request, we may need to refresh the cookie

B. Like vueuse, we can add the volume size that each function exports. But I'm not sure where to display it on the website page, or just add it to the README file.

import path from "node:path";
import { getExportsSize } from "export-size";
import { filesize } from "filesize";
import fs from "fs-extra";

const exportSize = path.resolve(__dirname, "../export-size.json");
async function run() {
  const mdJSON = <{ [name: string]: string }>{};
  const { exports } = await getExportsSize({
    pkg: "./",
    output: false,
    bundler: "rollup",
    external: ["react"],
  });

  for (const exp of exports) {
    mdJSON[exp.name] = filesize(exp.minzipped, { base: 2, standard: "jedec" }) as string;
  }

  fs.writeJSON(exportSize, mdJSON, { spaces: 2 });
}

run();

@Daydreamer-riri what do you think?

还有
控制台很多无关的打印内容

• Documents will be deployed using SSR
• ADD A CAROUSEL HOOK