Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can react-use be used in react-native? #483

Closed
GollyJer opened this issue Jul 23, 2019 · 6 comments
Closed

Can react-use be used in react-native? #483

GollyJer opened this issue Jul 23, 2019 · 6 comments

Comments

@GollyJer
Copy link

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
Copy link
Owner

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
Copy link

mptorz commented Sep 3, 2019

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
Copy link
Contributor

wardoost commented Sep 3, 2019

@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
Copy link

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

vyarmak added a commit to vyarmak/react-native-animated-pagination-dot that referenced this issue Nov 22, 2021
vyarmak added a commit to vyarmak/react-native-animated-pagination-dot that referenced this issue Nov 22, 2021
vyarmak added a commit to vyarmak/react-native-animated-pagination-dot that referenced this issue Nov 22, 2021
@mfkrause
Copy link

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
Copy link
Author

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! 💪

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants