diff --git a/CHANGELOG.md b/CHANGELOG.md index 8c284c6598..7f1a1a7255 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +# [9.2.0](https://github.com/streamich/react-use/compare/v9.1.2...v9.2.0) (2019-05-31) + + +### Features + +* 🎸 improve useObservable() type annotations ([d0c3713](https://github.com/streamich/react-use/commit/d0c3713)) +* improve useSetState() typings ([fad4440](https://github.com/streamich/react-use/commit/fad4440)) + ## [9.1.2](https://github.com/streamich/react-use/compare/v9.1.1...v9.1.2) (2019-05-24) diff --git a/README.md b/README.md index be438b1a1e..7f01d4b871 100644 --- a/README.md +++ b/README.md @@ -123,36 +123,25 @@ - [`useList`](./docs/useList.md) — tracks state of an array. - [`useMap`](./docs/useMap.md) — tracks state of an object. -## Usage -You need to have React [`16.8.0`](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) or later installed to use the Hooks API. You can import each hook individually - -```js -import useToggle from 'react-use/lib/useToggle' -``` - -or use ES6 named imports - -```js -import {useToggle} from 'react-use' -``` - -Depending on your bundler you might run into a missing dependency error with ES6 named import statements. Some hooks require you to install peer dependencies so we recommend using individual imports. If you want the best of both worlds you can transform the named import statements to individual import statements with [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import) by adding the following config to your `.babelrc` file: - -```json -[ - "import", { - "libraryName": "react-use", - "libraryDirectory": "lib", - "camel2DashComponentName": false - } -] -``` - -

License

+
+
+
+
+
+
+

- Unlicense — public domain. + Usage — how to import. +
+ Unlicense — public domain.

+
+
+
+
+
+ [img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg diff --git a/babel.config.js b/babel.config.js index 676164202b..86be860b75 100644 --- a/babel.config.js +++ b/babel.config.js @@ -10,5 +10,13 @@ module.exports = { ], "@babel/preset-react", "@babel/preset-typescript" - ] + ], + env: { + test: { + plugins: ['dynamic-import-node'] + }, + production: { + plugins: ['@babel/plugin-syntax-dynamic-import'] + } + } }; diff --git a/docs/Usage.md b/docs/Usage.md new file mode 100644 index 0000000000..07fd9987d9 --- /dev/null +++ b/docs/Usage.md @@ -0,0 +1,25 @@ +# Usage + +You need to have React [`16.8.0`](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) or later installed to use the Hooks API. You can import each hook individually + +```js +import useToggle from 'react-use/lib/useToggle' +``` + +or use ES6 named imports + +```js +import {useToggle} from 'react-use' +``` + +Depending on your bundler you might run into a missing dependency error with ES6 named import statements. Some hooks require you to install peer dependencies so we recommend using individual imports. If you want the best of both worlds you can transform the named import statements to individual import statements with [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import) by adding the following config to your `.babelrc` file: + +```json +[ + "import", { + "libraryName": "react-use", + "libraryDirectory": "lib", + "camel2DashComponentName": false + } +] +``` diff --git a/package.json b/package.json index 0d6897db69..4aab99ac29 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,10 @@ { "name": "react-use", - "version": "9.1.2", + "version": "9.2.0", "description": "Collection of React Hooks", "main": "lib/index.js", "module": "esm/index.js", + "sideEffects": false, "files": [ "lib/", "esm/" @@ -62,6 +63,8 @@ "@babel/preset-env": "7.4.5", "@babel/preset-react": "7.0.0", "@babel/preset-typescript": "7.3.3", + "@babel/plugin-syntax-dynamic-import": "7.2.0", + "babel-plugin-dynamic-import-node": "^2.2.0", "@semantic-release/changelog": "3.0.2", "@semantic-release/git": "7.0.8", "@semantic-release/npm": "5.1.7", @@ -97,7 +100,7 @@ "tslint-eslint-rules": "5.4.0", "tslint-plugin-prettier": "2.0.1", "tslint-react": "4.0.0", - "typescript": "3.4.5" + "typescript": "3.5.1" }, "config": { "commitizen": { diff --git a/src/__tests__/useObservable.test.tsx b/src/__tests__/useObservable.test.tsx new file mode 100644 index 0000000000..6bba8c871f --- /dev/null +++ b/src/__tests__/useObservable.test.tsx @@ -0,0 +1,35 @@ +import { act, renderHook } from 'react-hooks-testing-library'; +import { Subject } from 'rxjs'; +import { useObservable } from '..'; + +test('default initial value is undefined', () => { + const subject$ = new Subject(); + const { result } = renderHook(() => useObservable(subject$)); + + expect(result.current).toBe(undefined); +}); + +test('can specify initial value', () => { + const subject$ = new Subject(); + const { result } = renderHook(() => useObservable(subject$, 123)); + + expect(result.current).toBe(123); +}); + +test('returns the latest value of observables', () => { + const subject$ = new Subject(); + const { result } = renderHook(() => useObservable(subject$, 123)); + + act(() => { + subject$.next(125); + }); + expect(result.current).toBe(125); + + act(() => { + subject$.next(300); + subject$.next(400); + }); + expect(result.current).toBe(400); +}); + +xtest('subscribes to observable only once', () => {}); diff --git a/src/useObservable.ts b/src/useObservable.ts index 14a48286d7..49832492f0 100644 --- a/src/useObservable.ts +++ b/src/useObservable.ts @@ -1,6 +1,16 @@ import { useEffect, useState } from 'react'; -const useObservable = (observable$, initialValue?: T): T | undefined => { +export interface Observable { + subscribe: ( + listener: (value: T) => void + ) => { + unsubscribe: () => void; + }; +} + +function useObservable(observable$: Observable): T | undefined; +function useObservable(observable$: Observable, initialValue: T): T; +function useObservable(observable$: Observable, initialValue?: T): T | undefined { const [value, update] = useState(initialValue); useEffect(() => { @@ -9,6 +19,6 @@ const useObservable = (observable$, initialValue?: T): T | undefined => { }, [observable$]); return value; -}; +} export default useObservable; diff --git a/src/useSetState.ts b/src/useSetState.ts index 67b3db8fc3..d09004390e 100644 --- a/src/useSetState.ts +++ b/src/useSetState.ts @@ -1,6 +1,8 @@ import { useState } from 'react'; -const useSetState = (initialState: T = {} as T): [T, (patch: Partial | (() => void)) => void] => { +const useSetState = ( + initialState: T = {} as T +): [T, (patch: Partial | ((prevState: T) => Partial)) => void] => { const [state, set] = useState(initialState); const setState = patch => { set(prevState => Object.assign({}, prevState, patch instanceof Function ? patch(prevState) : patch)); diff --git a/yarn.lock b/yarn.lock index 62290207cf..cb9a407c55 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3432,7 +3432,7 @@ babel-plugin-add-react-displayname@^0.0.5: resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5" integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U= -babel-plugin-dynamic-import-node@2.2.0: +babel-plugin-dynamic-import-node@2.2.0, babel-plugin-dynamic-import-node@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.2.0.tgz#c0adfb07d95f4a4495e9aaac6ec386c4d7c2524e" integrity sha512-fP899ELUnTaBcIzmrW7nniyqqdYWrWuJUyPWHxFa/c7r7hS6KC8FscNfLlBNIoPSc55kYMGEEKjPjJGCLbE1qA== @@ -5246,7 +5246,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1: dependencies: ms "^2.1.1" -debuglog@*, debuglog@^1.0.1: +debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -7264,7 +7264,7 @@ import-local@^2.0.0: pkg-dir "^3.0.0" resolve-cwd "^2.0.0" -imurmurhash@*, imurmurhash@^0.1.4: +imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -8585,7 +8585,7 @@ libnpm@^2.0.1: read-package-json "^2.0.13" stringify-package "^1.0.0" -libnpmaccess@*, libnpmaccess@^3.0.1: +libnpmaccess@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/libnpmaccess/-/libnpmaccess-3.0.1.tgz#5b3a9de621f293d425191aa2e779102f84167fa8" integrity sha512-RlZ7PNarCBt+XbnP7R6PoVgOq9t+kou5rvhaInoNibhPO7eMlRfS0B8yjatgn2yaHIwWNyoJDolC/6Lc5L/IQA== @@ -8622,7 +8622,7 @@ libnpmhook@^5.0.2: get-stream "^4.0.0" npm-registry-fetch "^3.8.0" -libnpmorg@*, libnpmorg@^1.0.0: +libnpmorg@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/libnpmorg/-/libnpmorg-1.0.0.tgz#979b868c48ba28c5820e3bb9d9e73c883c16a232" integrity sha512-o+4eVJBoDGMgRwh2lJY0a8pRV2c/tQM/SxlqXezjcAg26Qe9jigYVs+Xk0vvlYDWCDhP0g74J8UwWeAgsB7gGw== @@ -8647,7 +8647,7 @@ libnpmpublish@^1.1.0: semver "^5.5.1" ssri "^6.0.1" -libnpmsearch@*, libnpmsearch@^2.0.0: +libnpmsearch@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/libnpmsearch/-/libnpmsearch-2.0.0.tgz#de05af47ada81554a5f64276a69599070d4a5685" integrity sha512-vd+JWbTGzOSfiOc+72MU6y7WqmBXn49egCCrIXp27iE/88bX8EpG64ST1blWQI1bSMUr9l1AKPMVsqa2tS5KWA== @@ -8656,7 +8656,7 @@ libnpmsearch@*, libnpmsearch@^2.0.0: get-stream "^4.0.0" npm-registry-fetch "^3.8.0" -libnpmteam@*, libnpmteam@^1.0.1: +libnpmteam@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/libnpmteam/-/libnpmteam-1.0.1.tgz#ff704b1b6c06ea674b3b1101ac3e305f5114f213" integrity sha512-gDdrflKFCX7TNwOMX1snWojCoDE5LoRWcfOC0C/fqF7mBq8Uz9zWAX4B2RllYETNO7pBupBaSyBDkTAC15cAMg== @@ -8837,11 +8837,6 @@ lodash-es@^4.17.11: resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0" integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q== -lodash._baseindexof@*: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" - integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw= - lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -8850,33 +8845,11 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= - -lodash._cacheindexof@*: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" - integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI= - -lodash._createcache@*: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" - integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM= - dependencies: - lodash._getnative "^3.0.0" - lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY= -lodash._getnative@*, lodash._getnative@^3.0.0: - version "3.9.1" - resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" - integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= - lodash._root@~3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692" @@ -8932,11 +8905,6 @@ lodash.pick@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3" integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM= -lodash.restparam@*: - version "3.6.1" - resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" - integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU= - lodash.some@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d" @@ -9955,15 +9923,6 @@ npm-pick-manifest@^2.2.3: npm-package-arg "^6.0.0" semver "^5.4.1" -npm-profile@*, npm-profile@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/npm-profile/-/npm-profile-4.0.1.tgz#d350f7a5e6b60691c7168fbb8392c3603583f5aa" - integrity sha512-NQ1I/1Q7YRtHZXkcuU1/IyHeLy6pd+ScKg4+DQHdfsm769TGq6HPrkbuNJVJS4zwE+0mvvmeULzQdWn2L2EsVA== - dependencies: - aproba "^1.1.2 || 2" - figgy-pudding "^3.4.1" - npm-registry-fetch "^3.8.0" - npm-profile@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/npm-profile/-/npm-profile-3.0.2.tgz#58d568f1b56ef769602fd0aed8c43fa0e0de0f57" @@ -9972,6 +9931,15 @@ npm-profile@^3.0.2: aproba "^1.1.2 || 2" make-fetch-happen "^2.5.0 || 3 || 4" +npm-profile@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/npm-profile/-/npm-profile-4.0.1.tgz#d350f7a5e6b60691c7168fbb8392c3603583f5aa" + integrity sha512-NQ1I/1Q7YRtHZXkcuU1/IyHeLy6pd+ScKg4+DQHdfsm769TGq6HPrkbuNJVJS4zwE+0mvvmeULzQdWn2L2EsVA== + dependencies: + aproba "^1.1.2 || 2" + figgy-pudding "^3.4.1" + npm-registry-fetch "^3.8.0" + npm-registry-client@^8.6.0: version "8.6.0" resolved "https://registry.yarnpkg.com/npm-registry-client/-/npm-registry-client-8.6.0.tgz#7f1529f91450732e89f8518e0f21459deea3e4c4" @@ -11834,7 +11802,7 @@ readable-stream@~1.1.10: isarray "0.0.1" string_decoder "~0.10.x" -readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0: +readdir-scoped-modules@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747" integrity sha1-n6+jfShr5dksuuve4DDcm19AZ0c= @@ -13755,10 +13723,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@3.4.5: - version "3.4.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.5.tgz#2d2618d10bb566572b8d7aad5180d84257d70a99" - integrity sha512-YycBxUb49UUhdNMU5aJ7z5Ej2XGmaIBL0x34vZ82fn3hGvD+bgrMrVDpatgz2f7YxUMJxMkbWxJZeAvDxVe7Vw== +typescript@3.5.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.1.tgz#ba72a6a600b2158139c5dd8850f700e231464202" + integrity sha512-64HkdiRv1yYZsSe4xC1WVgamNigVYjlssIoaH2HcZF0+ijsk5YK2g0G34w9wJkze8+5ow4STd22AynfO6ZYYLw== ua-parser-js@^0.7.18: version "0.7.19"