diff --git a/docs/useBreakpoint.md b/docs/useBreakpoint.md new file mode 100644 index 00000000..de346a46 --- /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 00000000..2fef4837 --- /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 9c660296..772f69fb 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 00000000..6b9f4e02 --- /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