change word

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 <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>;
@@ -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 <div> XL </div>;
   else if (breakpoint == "L") return <div> LoL</div>;
   else if (breakpoint == "S") return <div> Sexyy</div>;

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 (
     <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>{"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>
   );

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(() => {

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';