From 13ac976b0d30788e8ee8a760c4e9dcf3aef8e725 Mon Sep 17 00:00:00 2001
From: Jakkapat Boonroj <max.jakkapat@gmail.com>
Date: Wed, 23 Oct 2019 10:33:36 +0700
Subject: [PATCH] change word

---
 docs/createBreakpoint.md                   | 12 +++++++++---
 src/__stories__/createBreakpoint.story.tsx | 16 ++++++++++------
 src/createBreakpoint.ts                    |  2 +-
 src/index.ts                               |  2 +-
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/docs/createBreakpoint.md b/docs/createBreakpoint.md
index de346a46f7..a07cb68b15 100644
--- a/docs/createBreakpoint.md
+++ b/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>;
diff --git a/src/__stories__/createBreakpoint.story.tsx b/src/__stories__/createBreakpoint.story.tsx
index 6e810e99df..92068f79b5 100644
--- a/src/__stories__/createBreakpoint.story.tsx
+++ b/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>
   );
diff --git a/src/createBreakpoint.ts b/src/createBreakpoint.ts
index a0542e75d4..966a03558c 100644
--- a/src/createBreakpoint.ts
+++ b/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(() => {
diff --git a/src/index.ts b/src/index.ts
index 241f91db48..88cd19a6e9 100644
--- a/src/index.ts
+++ b/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';