Comments (9)
I have been using babel-plugin-import
for util packages like this one. Might be good to add something in the docs about this? .babelrc
is pretty straight forward:
{
"plugins": [
[
"import", {
"libraryName": "react-use",
"libraryDirectory": "lib",
"camel2DashComponentName": false
}
]
]
}
from react-use.
That would be great! Sorry, for bloating dependencies.
from react-use.
@streamich I believe create-react-app
have tree shaking enabled, but still not able to use es module syntax, getting keyboardjs
missing error without installing those peerDependencies
import { useAsync } from 'react-use';
Error:
./node_modules/react-use/esm/useKeyboardJs.js
Module not found: Can't resolve 'keyboardjs' in '/Users/chen/projects/github/open_source/hacker-tab-extension/node_modules/react-use/esm'
from react-use.
Always a great reference site:
https://bundlephobia.com/[email protected]
Could also be a good idea to update the build configuration for this package so that it additionally outputs an ES6 version (pointed at by the module
key within package.json
).
I do this in my library, for example here is the package output:
https://unpkg.com/[email protected]/
Some build systems (e.g. create-react-app) will then automatically use the ES6 version and treeshake accordingly.
from react-use.
@ctrlplusb bundlephobia is what prompted me to open this ticket, and is preventing us to use this because we don't want to bloat our bundle!
Is there any progress on this?
from react-use.
Is there any progress on this?
@Cretezy Well, on Feb 7 you volunteered to make a PR 😄:
If this is a go, I could make the PR with the changes (code & docs) required for this.
from react-use.
Ah damn I had never seen that comment! I'll start working on something when I have free time
from react-use.
Opened PR: #161
from react-use.
react-use
now has"sideEffects": false
set, which should enable Webpack tree-shaking.- See Usage readme if your bundler does not support tree-shaking.
- Big dependencies are now in
peerDependencies
there are few dependencies this library installs but all of those are very minor:copy-to-clipboard
— this is just one file and used only if you use copy-to-clipboard hook.nano-css
— this should add less than 1Kb to your bundle and only if you useuseCss
hook.react-fast-compare
— this is just one function for deep comparison of objects.react-wait
— this isuseWait
hook, will be included in your bundle only if you useuseWait
hook.screenfull
— used for cross-browser compatibility only inuseFullscreen
hook.throttle-debounce
— just two functions: throttle and debounce.ts-easing
— list of easing functions for animations.
from react-use.
Related Issues (20)
- build size > 100k? make items importable from own file? HOT 1
- useMeasure: React18 Support (Suspense boundary breaks when using the hook) HOT 3
- What's the meaning of useSlider's prop 'styles' with the type CSSProperties
- Request: replace keyboardjs dependency with keystrokes (updated lib) HOT 1
- `useLocalStorage` not working with updater function HOT 1
- useVideo.story.tsx - sampleVideo can not be loaded HOT 3
- How to make clicking some elements an exception for useClickAway hook
- Add a reset history method to useStateWithHistory
- Install hooks seperate from each other HOT 2
- UseKeyPressEvent doesn't work when non-english language is set HOT 1
- useMeasure dimensions out of sync in react18 HOT 2
- Please add a list of valid keys to https://github.com/streamich/react-use/blob/master/docs/useKey.md
- useMedia deprecated methods HOT 1
- There is deprecated dependency in your nano-css HOT 1
- useWindowSize does not work on App Router (nextjs) HOT 1
- useCopyToClipboard: accept options object to pass to copy-to-clipboard HOT 2
- useCopyToClipboard: accept options object to pass to copy-to-clipboard
- [question]: How can I combine useMeasure with useHoverDirty HOT 1
- useLocalStorage doesn't not remove key on setValue(undefined) HOT 1
- useLocalStorage documentation: warn against calling with same key in multiple components HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-use.