Can react-use be used in react-native?

[GollyJer]

I tried to use the useAsync hook today and ran into an error.

nano-css detected browser environment because of "window" global, but "document" global seems to be defective.

I assume this is because react-use expects React and not React Native?

[streamich]

I believe this is because you are importing from the main entry point

import {useAsync} from 'react-use';

and you don't have tree shaking enabled, which also imports useCss hook, which works only in browser. If you import only the hook you use, it should work

import useAsync from 'react-use/lib/useAsync';

[mptorz]

I have got the same issue today when I tried using it with React Native. I think it would be a good idea to add some explicit information about it to the readme. If you want I can submit a PR adding some extra info there :)

Also is there any way to make it work with React Native out of the box? I would be happy to implement it as well!

[wardoost]

@mptorz There is a link with usage/import instructions on the readme. There have been previous discussions about the importing issue in #187. I'm not sure how we can improve this besides advising people not to import from the main entry point.

[miracle2k]

Maybe it would it be possible to ship with foo.native.ts files which provide dummy implementations for react-native.

[mfkrause]

For anyone stumbling upon this in the future and wanting to make their life easier, here's an eslint rule to make sure you're not importing from the main entrypoint:

"no-restricted-imports": [
  "error",
  {
    "name": "react-use",
    "message": "Please import the specific function from react-use instead of the whole library (e.g. import useTimeout from 'react-use/lib/useTimeout')"
  }
]

[GollyJer]

For anyone stumbling upon this in the future and wanting to make their life easier, here's an eslint rule to make sure you're not importing from the main entrypoint:

"no-restricted-imports": [
  "error",
  {
    "name": "react-use",
    "message": "Please import the specific function from react-use instead of the whole library (e.g. import useTimeout from 'react-use/lib/useTimeout')"
  }
]

Useful... thanks! 💪