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