From 8cdcfddae4d951a5f5d1f5ca067c30a2bf436b94 Mon Sep 17 00:00:00 2001 From: Jakkapat Boonroj Date: Tue, 22 Oct 2019 22:35:25 +0700 Subject: [PATCH 1/6] :sparkles: create useBreakpoint --- docs/useBreakpoint.md | 37 +++++++++++++++++++++++++ src/__stories__/useBreakpoint.story.tsx | 25 +++++++++++++++++ src/index.ts | 2 +- src/useBreakpoint.ts | 24 ++++++++++++++++ 4 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 docs/useBreakpoint.md create mode 100644 src/__stories__/useBreakpoint.story.tsx create mode 100644 src/useBreakpoint.ts diff --git a/docs/useBreakpoint.md b/docs/useBreakpoint.md new file mode 100644 index 0000000000..de346a46f7 --- /dev/null +++ b/docs/useBreakpoint.md @@ -0,0 +1,37 @@ +# `useBreakpoint` + +## Usage + +### use default breakpoint + +laptopL: 1440, laptop: 1024, tablet: 768 + +```jsx +import React from "react"; +import { useBreakpoint } from "react-use"; + +const Demo = () => { + const breakpoint = useBreakpoint(); + if (breakpoint === "laptopL") return
This is very big Laptop
; + else if (breakpoint == "laptop") return
This is Laptop
; + else if (breakpoint == "tablet") return
This is Tablet
; + else return
Too small!
; +}; +``` + +### use custom breakpoint + +XL: 1280, L: 768, S: 350 + +```jsx +import React from "react"; +import { useBreakpoint } from "react-use"; + +const Demo = () => { + const breakpoint = useBreakpoint(); + if (breakpoint === "XL") return
XL
; + else if (breakpoint == "L") return
LoL
; + else if (breakpoint == "S") return
Sexyy
; + else return
Wth
; +}; +``` diff --git a/src/__stories__/useBreakpoint.story.tsx b/src/__stories__/useBreakpoint.story.tsx new file mode 100644 index 0000000000..2fef483782 --- /dev/null +++ b/src/__stories__/useBreakpoint.story.tsx @@ -0,0 +1,25 @@ +import { number, withKnobs } from "@storybook/addon-knobs"; +import { storiesOf } from "@storybook/react"; +import React from "react"; +import { useBreakpoint } from ".."; +import ShowDocs from "./util/ShowDocs"; +const Demo = () => { + const breakpoint = useBreakpoint(); + const breakpointB = useBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 }); + return ( +
+

{"try resize your window"}

+

{"useBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"}

+

{breakpoint}

+

{"useBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"}

+

{breakpointB}

+
+ ); +}; + +storiesOf("sensors|useBreakpoint", module) + .addDecorator(withKnobs) + .add("Docs", () => ) + .add("Demo", () => { + return ; + }); diff --git a/src/index.ts b/src/index.ts index 9c660296a2..772f69fb17 100644 --- a/src/index.ts +++ b/src/index.ts @@ -31,6 +31,7 @@ export { default as useIntersection } from './useIntersection'; export { default as useInterval } from './useInterval'; export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; export { default as useKey } from './useKey'; +export { default as useBreakpoint } from './useBreakpoint'; // not exported because of peer dependency // export { default as useKeyboardJs } from './useKeyboardJs'; export { default as useKeyPress } from './useKeyPress'; @@ -62,7 +63,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, use `useMountedState` instead */ diff --git a/src/useBreakpoint.ts b/src/useBreakpoint.ts new file mode 100644 index 0000000000..6b9f4e0268 --- /dev/null +++ b/src/useBreakpoint.ts @@ -0,0 +1,24 @@ +import { useEffect, useState } from 'react' + +function useBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) { + const [useScreen, setScreen] = useState(0) + + useEffect(() => { + const setSideScreen = (): void => { + setScreen(window.innerWidth) + } + setSideScreen() + window.addEventListener('resize', setSideScreen) + return () => { + window.removeEventListener('resize', setSideScreen) + } + }) + const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => a[1] >= b[1] ? 1 : -1) + const result = sortedBreakpoints.reduce((acc, [name, width]) => { + if (useScreen >= width) return name + else return acc + }, sortedBreakpoints[0][0]) + return result +} + +export default useBreakpoint From 9c779b256b0a6fecaa9df0a999c372e37ac6c097 Mon Sep 17 00:00:00 2001 From: Jakkapat Boonroj Date: Wed, 23 Oct 2019 10:11:29 +0700 Subject: [PATCH 2/6] rename variable --- src/useBreakpoint.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/useBreakpoint.ts b/src/useBreakpoint.ts index 6b9f4e0268..696902d2f5 100644 --- a/src/useBreakpoint.ts +++ b/src/useBreakpoint.ts @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' function useBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) { - const [useScreen, setScreen] = useState(0) + const [screen, setScreen] = useState(0) useEffect(() => { const setSideScreen = (): void => { @@ -15,7 +15,7 @@ function useBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440 }) const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => a[1] >= b[1] ? 1 : -1) const result = sortedBreakpoints.reduce((acc, [name, width]) => { - if (useScreen >= width) return name + if (screen >= width) return name else return acc }, sortedBreakpoints[0][0]) return result From 20bdd507883ce41307a27df5d5c4b58c3a4078a5 Mon Sep 17 00:00:00 2001 From: Jakkapat Boonroj Date: Wed, 23 Oct 2019 10:13:25 +0700 Subject: [PATCH 3/6] add useMemo --- src/useBreakpoint.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/useBreakpoint.ts b/src/useBreakpoint.ts index 696902d2f5..f4a685cb36 100644 --- a/src/useBreakpoint.ts +++ b/src/useBreakpoint.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react' +import { useEffect, useState, useMemo } from 'react' function useBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) { const [screen, setScreen] = useState(0) @@ -13,7 +13,7 @@ function useBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440 window.removeEventListener('resize', setSideScreen) } }) - const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => a[1] >= b[1] ? 1 : -1) + const sortedBreakpoints = useMemo(() => Object.entries(breakpoints).sort((a, b) => a[1] >= b[1] ? 1 : -1), [breakpoints]) const result = sortedBreakpoints.reduce((acc, [name, width]) => { if (screen >= width) return name else return acc From fa08f930046ac05911ada1ed9813eabe8c3e079a Mon Sep 17 00:00:00 2001 From: Jakkapat Boonroj Date: Wed, 23 Oct 2019 10:15:38 +0700 Subject: [PATCH 4/6] rename to createBreakpoint --- docs/{useBreakpoint.md => createBreakpoint.md} | 0 .../{useBreakpoint.story.tsx => createBreakpoint.story.tsx} | 4 ++-- src/{useBreakpoint.ts => createBreakpoint.ts} | 4 ++-- src/index.ts | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) rename docs/{useBreakpoint.md => createBreakpoint.md} (100%) rename src/__stories__/{useBreakpoint.story.tsx => createBreakpoint.story.tsx} (85%) rename src/{useBreakpoint.ts => createBreakpoint.ts} (83%) diff --git a/docs/useBreakpoint.md b/docs/createBreakpoint.md similarity index 100% rename from docs/useBreakpoint.md rename to docs/createBreakpoint.md diff --git a/src/__stories__/useBreakpoint.story.tsx b/src/__stories__/createBreakpoint.story.tsx similarity index 85% rename from src/__stories__/useBreakpoint.story.tsx rename to src/__stories__/createBreakpoint.story.tsx index 2fef483782..6e810e99df 100644 --- a/src/__stories__/useBreakpoint.story.tsx +++ b/src/__stories__/createBreakpoint.story.tsx @@ -17,9 +17,9 @@ const Demo = () => { ); }; -storiesOf("sensors|useBreakpoint", module) +storiesOf("sensors|createBreakpoint", module) .addDecorator(withKnobs) - .add("Docs", () => ) + .add("Docs", () => ) .add("Demo", () => { return ; }); diff --git a/src/useBreakpoint.ts b/src/createBreakpoint.ts similarity index 83% rename from src/useBreakpoint.ts rename to src/createBreakpoint.ts index f4a685cb36..a0542e75d4 100644 --- a/src/useBreakpoint.ts +++ b/src/createBreakpoint.ts @@ -1,6 +1,6 @@ import { useEffect, useState, useMemo } from 'react' -function useBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) { +function createBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) { const [screen, setScreen] = useState(0) useEffect(() => { @@ -21,4 +21,4 @@ function useBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440 return result } -export default useBreakpoint +export default createBreakpoint diff --git a/src/index.ts b/src/index.ts index 772f69fb17..241f91db48 100644 --- a/src/index.ts +++ b/src/index.ts @@ -31,7 +31,7 @@ export { default as useIntersection } from './useIntersection'; export { default as useInterval } from './useInterval'; export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; export { default as useKey } from './useKey'; -export { default as useBreakpoint } from './useBreakpoint'; +export { default as useBreakpoint } from './createBreakpoint'; // not exported because of peer dependency // export { default as useKeyboardJs } from './useKeyboardJs'; export { default as useKeyPress } from './useKeyPress'; From 75827fd497d69dca17c39fe39a6374fd44002231 Mon Sep 17 00:00:00 2001 From: Jakkapat Boonroj Date: Wed, 23 Oct 2019 10:21:55 +0700 Subject: [PATCH 5/6] add createBreakpoint in readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 76fd92c187..b0f21b0f71 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,7 @@ - [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs) - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668) - [`useMeasure`](./docs/useMeasure.md) — tracks an HTML element's dimensions using the Resize Observer API.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo) + - [`createBreakpoint`](./doc/createBreakpoint.md) — tracks `innerWidth`

- [**UI**](./docs/UI.md) From 13ac976b0d30788e8ee8a760c4e9dcf3aef8e725 Mon Sep 17 00:00:00 2001 From: Jakkapat Boonroj Date: Wed, 23 Oct 2019 10:33:36 +0700 Subject: [PATCH 6/6] change word --- docs/createBreakpoint.md | 12 +++++++++--- src/__stories__/createBreakpoint.story.tsx | 16 ++++++++++------ src/createBreakpoint.ts | 2 +- src/index.ts | 2 +- 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/docs/createBreakpoint.md b/docs/createBreakpoint.md index de346a46f7..a07cb68b15 100644 --- a/docs/createBreakpoint.md +++ b/docs/createBreakpoint.md @@ -1,4 +1,4 @@ -# `useBreakpoint` +# `createBreakpoint` ## Usage @@ -8,10 +8,13 @@ laptopL: 1440, laptop: 1024, tablet: 768 ```jsx import React from "react"; -import { useBreakpoint } from "react-use"; +import { createBreakpoint } from "react-use"; + +const useBreakpoint = createBreakpoint(); const Demo = () => { const breakpoint = useBreakpoint(); + if (breakpoint === "laptopL") return
This is very big Laptop
; else if (breakpoint == "laptop") return
This is Laptop
; else if (breakpoint == "tablet") return
This is Tablet
; @@ -25,10 +28,13 @@ XL: 1280, L: 768, S: 350 ```jsx import React from "react"; -import { useBreakpoint } from "react-use"; +import { createBreakpoint } from "react-use"; + +const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 }); const Demo = () => { const breakpoint = useBreakpoint(); + if (breakpoint === "XL") return
XL
; else if (breakpoint == "L") return
LoL
; else if (breakpoint == "S") return
Sexyy
; diff --git a/src/__stories__/createBreakpoint.story.tsx b/src/__stories__/createBreakpoint.story.tsx index 6e810e99df..92068f79b5 100644 --- a/src/__stories__/createBreakpoint.story.tsx +++ b/src/__stories__/createBreakpoint.story.tsx @@ -1,17 +1,21 @@ import { number, withKnobs } from "@storybook/addon-knobs"; import { storiesOf } from "@storybook/react"; import React from "react"; -import { useBreakpoint } from ".."; +import { createBreakpoint } from ".."; import ShowDocs from "./util/ShowDocs"; + +const useBreakpointA = createBreakpoint(); +const useBreakpointB = createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 }); + const Demo = () => { - const breakpoint = useBreakpoint(); - const breakpointB = useBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 }); + const breakpointA = useBreakpointA(); + const breakpointB = useBreakpointB(); return (

{"try resize your window"}

-

{"useBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"}

-

{breakpoint}

-

{"useBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"}

+

{"createBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"}

+

{breakpointA}

+

{"createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"}

{breakpointB}

); diff --git a/src/createBreakpoint.ts b/src/createBreakpoint.ts index a0542e75d4..966a03558c 100644 --- a/src/createBreakpoint.ts +++ b/src/createBreakpoint.ts @@ -1,6 +1,6 @@ import { useEffect, useState, useMemo } from 'react' -function createBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) { +const createBreakpoint = (breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) => () => { const [screen, setScreen] = useState(0) useEffect(() => { diff --git a/src/index.ts b/src/index.ts index 241f91db48..88cd19a6e9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -31,7 +31,7 @@ export { default as useIntersection } from './useIntersection'; export { default as useInterval } from './useInterval'; export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; export { default as useKey } from './useKey'; -export { default as useBreakpoint } from './createBreakpoint'; +export { default as createBreakpoint } from './createBreakpoint'; // not exported because of peer dependency // export { default as useKeyboardJs } from './useKeyboardJs'; export { default as useKeyPress } from './useKeyPress';