feat: add createBreakpoint

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`
     <br/>
     <br/>
 - [**UI**](./docs/UI.md)

docs/createBreakpoint.md

@@ -0,0 +1,43 @@
+# `createBreakpoint`
+
+## Usage
+
+### use default breakpoint
+
+laptopL: 1440, laptop: 1024, tablet: 768
+
+```jsx
+import React from "react";
+import { createBreakpoint } from "react-use";
+
+const useBreakpoint = createBreakpoint();
+
+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 { createBreakpoint } from "react-use";
+
+const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });
+
+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__/createBreakpoint.story.tsx

@@ -0,0 +1,29 @@
+import { number, withKnobs } from "@storybook/addon-knobs";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+import { createBreakpoint } from "..";
+import ShowDocs from "./util/ShowDocs";
+
+const useBreakpointA = createBreakpoint();
+const useBreakpointB = createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 });
+
+const Demo = () => {
+  const breakpointA = useBreakpointA();
+  const breakpointB = useBreakpointB();
+  return (
+    <div>
+      <p>{"try resize your window"}</p>
+      <p>{"createBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"}</p>
+      <p>{breakpointA}</p>
+      <p>{"createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"}</p>
+      <p>{breakpointB}</p>
+    </div>
+  );
+};
+
+storiesOf("sensors|createBreakpoint", module)
+  .addDecorator(withKnobs)
+  .add("Docs", () => <ShowDocs md={require("../../docs/createBreakpoint.md")} />)
+  .add("Demo", () => {
+    return <Demo />;
+  });

src/createBreakpoint.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState, useMemo } from 'react'
+
+const createBreakpoint = (breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) => () => {
+      const [screen, setScreen] = useState(0)
+
+      useEffect(() => {
+            const setSideScreen = (): void => {
+                  setScreen(window.innerWidth)
+            }
+            setSideScreen()
+            window.addEventListener('resize', setSideScreen)
+            return () => {
+                  window.removeEventListener('resize', setSideScreen)
+            }
+      })
+      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
+      }, sortedBreakpoints[0][0])
+      return result
+}
+
+export default createBreakpoint

src/index.ts

@@ -32,6 +32,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 createBreakpoint } from './createBreakpoint';
 // not exported because of peer dependency
 // export { default as useKeyboardJs } from './useKeyboardJs';
 export { default as useKeyPress } from './useKeyPress';
@@ -63,7 +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, use `useMountedState` instead
  */