✨ create useBreakpoint

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 <div> This is very big Laptop </div>;
+  else if (breakpoint == "laptop") return <div> This is Laptop</div>;
+  else if (breakpoint == "tablet") return <div> This is Tablet</div>;
+  else return <div> Too small!</div>;
+};
+```
+
+### 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 <div> XL </div>;
+  else if (breakpoint == "L") return <div> LoL</div>;
+  else if (breakpoint == "S") return <div> Sexyy</div>;
+  else return <div> Wth</div>;
+};
+```

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 (
+    <div>
+      <p>{"try resize your window"}</p>
+      <p>{"useBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"}</p>
+      <p>{breakpoint}</p>
+      <p>{"useBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"}</p>
+      <p>{breakpointB}</p>
+    </div>
+  );
+};
+
+storiesOf("sensors|useBreakpoint", module)
+  .addDecorator(withKnobs)
+  .add("Docs", () => <ShowDocs md={require("../../docs/useBreakpoint.md")} />)
+  .add("Demo", () => {
+    return <Demo />;
+  });

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
  */

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