From dc364c851ce08dc827047cd3deb097ddfa6ca761 Mon Sep 17 00:00:00 2001 From: xobotyi Date: Fri, 1 Nov 2019 00:13:57 +0300 Subject: [PATCH 1/2] feat(useRefMounted): remove obsolete hook; --- README.md | 2 +- docs/useRefMounted.md | 28 ------------------------- src/__stories__/useRefMounted.story.tsx | 21 ------------------- src/index.ts | 4 ---- src/useRefMounted.ts | 23 -------------------- 5 files changed, 1 insertion(+), 77 deletions(-) delete mode 100644 docs/useRefMounted.md delete mode 100644 src/__stories__/useRefMounted.story.tsx delete mode 100644 src/useRefMounted.ts diff --git a/README.md b/README.md index a26fa34bce..f361275c9b 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,7 @@ - [`useEffectOnce`](./docs/useEffectOnce.md) — a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that only runs once. - [`useEvent`](./docs/useEvent.md) — subscribe to events. - [`useLifecycles`](./docs/useLifecycles.md) — calls `mount` and `unmount` callbacks. - - [`useMountedState`](./docs/useMountedState.md) ~~and [`useRefMounted`](./docs/useRefMounted.md)~~ — track if component is mounted. + - [`useMountedState`](./docs/useMountedState.md) — track if component is mounted. - [`usePromise`](./docs/usePromise.md) — resolves promise only while component is mounted. - [`useLogger`](./docs/useLogger.md) — logs in console as component goes through life-cycles. - [`useMount`](./docs/useMount.md) — calls `mount` callbacks. diff --git a/docs/useRefMounted.md b/docs/useRefMounted.md deleted file mode 100644 index 0e7d708eb5..0000000000 --- a/docs/useRefMounted.md +++ /dev/null @@ -1,28 +0,0 @@ -# `useRefMounted` - ->**DEPRECATED** ->This method is obsolete, use `useMountedState` instead. - -Lifecycle hook that tracks if component is mounted. Returns a ref, which has a -boolean `.current` property. - - -## Usage - -```jsx -import {useRefMounted} from 'react-use'; - -const Demo = () => { - const refMounted = useRefMounted(); - - useEffect(() => { - setTimeout(() => { - if (refMounted.current) { - // ... - } else { - // ... - } - }, 1000); - }); -}; -``` diff --git a/src/__stories__/useRefMounted.story.tsx b/src/__stories__/useRefMounted.story.tsx deleted file mode 100644 index 5a8c22b6a9..0000000000 --- a/src/__stories__/useRefMounted.story.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import { useRaf, useRefMounted } from '..'; -import ShowDocs from './util/ShowDocs'; - -const Demo = () => { - const refMounted = useRefMounted(); - - useRaf(); - return ( -
-

**DEPRECATED**

-

This method is obsolete, use `useMountedState` instead.

- is mounted: {refMounted.current ? '👍' : '👎'} -
- ); -}; - -storiesOf('Lifecycle|useRefMounted', module) - .add('Docs', () => ) - .add('Demo', () => ); diff --git a/src/index.ts b/src/index.ts index 83761805e3..4ff7384e92 100644 --- a/src/index.ts +++ b/src/index.ts @@ -64,10 +64,6 @@ export { default as usePromise } from './usePromise'; export { default as useRaf } from './useRaf'; export { default as useRafLoop } from './useRafLoop'; export { default as useRafState } from './useRafState'; -/** - * @deprecated This hook is obsolete and Will be removed soon, use `useMountedState` instead - */ -export { default as useRefMounted } from './useRefMounted'; export { default as useSearchParam } from './useSearchParam'; export { default as useScroll } from './useScroll'; export { default as useScrolling } from './useScrolling'; diff --git a/src/useRefMounted.ts b/src/useRefMounted.ts deleted file mode 100644 index 5d285db014..0000000000 --- a/src/useRefMounted.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { RefObject, useEffect, useRef } from 'react'; - -/** - * @deprecated This hook is obsolete, use `useMountedState` instead - */ -const useRefMounted = (): RefObject => { - const refMounted = useRef(false); - - useEffect(() => { - refMounted.current = true; - - return () => { - refMounted.current = false; - }; - }, []); - - return refMounted; -}; - -/** - * @deprecated This hook is obsolete, use `useMountedState` instead - */ -export default useRefMounted; From d7c38bd77fa6e2626d6c58d386dd09d7a5b57e43 Mon Sep 17 00:00:00 2001 From: xobotyi Date: Sun, 27 Oct 2019 22:28:11 +0300 Subject: [PATCH 2/2] feat(useWait): removed from package due to it is simple reexport of other package; --- README.md | 1 - docs/useWait.md | 37 ----------------------------- package.json | 2 -- src/__stories__/useWait.story.tsx | 39 ------------------------------- src/index.ts | 4 ---- src/useWait.ts | 4 ---- yarn.lock | 12 ---------- 7 files changed, 99 deletions(-) delete mode 100644 docs/useWait.md delete mode 100644 src/__stories__/useWait.story.tsx diff --git a/README.md b/README.md index a26fa34bce..fb66c420e6 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,6 @@ - [`useFullscreen`](./docs/useFullscreen.md) — display an element or video full-screen. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo) - [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m) - [`useVideo`](./docs/useVideo.md) — plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo) - - ~~[`useWait`](./docs/useWait.md) — complex waiting management for UIs.~~ _Deprecated_: will be removed soon

- [**Animations**](./docs/Animations.md) diff --git a/docs/useWait.md b/docs/useWait.md deleted file mode 100644 index 99f62ae2d2..0000000000 --- a/docs/useWait.md +++ /dev/null @@ -1,37 +0,0 @@ -# `useWait` - -`useWait` is a React Hook helps to manage multiple loading states on the page without any conflict. It's based on a very simple idea that manages an `Array` of multiple loading states. The built-in `Wait` component listens its registered loader and immediately become loading state. - - -## Usage - -```jsx -import { useWait } from 'react-use' - -function UserCreateButton() { - const { startWaiting, endWaiting, isWaiting, Wait } = useWait(); - - return ( - - ); -} -``` - -And you should wrap your `App` with `Waiter` component. It's actually a `Context.Provider` that provides a loading context to the component tree. - -```jsx -const rootElement = document.getElementById("root"); -ReactDOM.render( - - - , - rootElement -); -``` diff --git a/package.json b/package.json index 8975b7d5b8..ebe110b4c7 100644 --- a/package.json +++ b/package.json @@ -46,11 +46,9 @@ }, "homepage": "https://github.com/streamich/react-use#readme", "dependencies": { - "@types/react-wait": "^0.3.0", "copy-to-clipboard": "^3.1.0", "nano-css": "^5.1.0", "react-fast-compare": "^2.0.4", - "react-wait": "^0.3.0", "resize-observer-polyfill": "^1.5.1", "screenfull": "^5.0.0", "set-harmonic-interval": "^1.0.1", diff --git a/src/__stories__/useWait.story.tsx b/src/__stories__/useWait.story.tsx deleted file mode 100644 index f7bd67ae86..0000000000 --- a/src/__stories__/useWait.story.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import { useWait } from '..'; -import ShowDocs from './util/ShowDocs'; - -const AnotherComponent = () => { - const { isWaiting } = useWait(); - return

{isWaiting('creating user') ? 'Now creating user...' : ''}

; -}; - -const Demo = () => { - const { Wait, isWaiting, startWaiting, endWaiting } = useWait(); - - function createUser() { - startWaiting('creating user'); - setTimeout(() => { - endWaiting('creating user'); - }, 1000); - } - - return ( -
- - -
- ); -}; - -storiesOf('UI|useWait', module) - .add('Docs', () => ) - .add('Demo', () => ( - - - - )); diff --git a/src/index.ts b/src/index.ts index 83761805e3..5fb6ff322b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -93,10 +93,6 @@ export { default as useUpsert } from './useUpsert'; export { default as useVideo } from './useVideo'; export { default as useStateValidator } from './useStateValidator'; export { useMultiStateValidator } from './useMultiStateValidator'; -/** - * @deprecated Will be removed soon - */ -export { useWait, Waiter } from './useWait'; export { default as useWindowScroll } from './useWindowScroll'; export { default as useWindowSize } from './useWindowSize'; export { default as useMeasure } from './useMeasure'; diff --git a/src/useWait.ts b/src/useWait.ts index 5938b56d2f..e69de29bb2 100644 --- a/src/useWait.ts +++ b/src/useWait.ts @@ -1,4 +0,0 @@ -/** - * @deprecated Will be removed soon - */ -export { useWait, Waiter } from 'react-wait'; diff --git a/yarn.lock b/yarn.lock index 4e986586dd..f0f602ed6a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2416,13 +2416,6 @@ dependencies: "@types/react" "*" -"@types/react-wait@^0.3.0": - version "0.3.0" - resolved "https://registry.yarnpkg.com/@types/react-wait/-/react-wait-0.3.0.tgz#6f7ef17571a17e72c7864ede8cf7d3aa525a005e" - integrity sha512-5jIfDcHRjqeE7QfZG7kCqOpfrPSvOM1E3/nlKuJ/NZrG/WrhLo/AFr0i72jhTWzyNRo4ex0pshBaiCHksZXH3A== - dependencies: - "@types/react" "*" - "@types/react@*", "@types/react@16.9.2": version "16.9.2" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268" @@ -10756,11 +10749,6 @@ react-transition-group@^2.2.1: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react-wait@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/react-wait/-/react-wait-0.3.0.tgz#0cdd4d919012451a5bc3ab0a16d00c6fd9a8c10b" - integrity sha512-kB5x/kMKWcn0uVr9gBdNz21/oGbQwEQnF3P9p6E9yLfJ9DRcKS0fagbgYMFI0YFOoyKDj+2q6Rwax0kTYJF37g== - react@16.11.0: version "16.11.0" resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"