release

wintercounter · Apr 21, 2021 · c550090 · c550090
1 parent f435258
commit c550090
Show file tree

Hide file tree

Showing 35 changed files with 229 additions and 289 deletions.
diff --git a/README.md b/README.md
@@ -14,8 +14,23 @@ npm i @w11r/use-breakpoint
 
 # Setup
 
-By default you don't need to do anything. The following default values
-are being used. It also shorthands.
+## Add provider
+
+Add `BreakpointProvider` in your React tree.
+
+```jsx
+import { BreakpointProvider } from '@w11r/use-breakpoint'
+
+...
+    <BreakpointProvider>
+        ...
+    </BreakpointProvider>
+...
+```
+
+## Default breakpoints
+
+The following default breakpoints are being used, including several shorthands.
 
 ```js
 const breakpoints = {
@@ -66,13 +81,12 @@ useBreakpoint(defaultValue, breakpointValues)
   ['tablet', 400]
 ]
 
-// In case you have a single breakpoint value, `['mobile', 300]`
-is enough instead of `[['mobile', 300]]`
+// In case you have a single breakpoint value, `['mobile', 300]` is enough instead of `[['mobile', 300]]`
 ```
 
 ## Without passing values
 
-In case you dont specify any value to the hook, it'll return a generated
+In case you don't specify any value to the hook, it'll return a generated
 object including boolean values for each breakpoint keys that's being
 defined in options.
 
@@ -148,7 +162,7 @@ const { isMobile } = useBreakpoint()
 const isMobile = useBreakpoint(false, ['mobile', true])
 ```
 
-> You can also access the values with suffix and prefix but you need
+> You can also access the values with suffix and prefix, but you need
 > to rename the variables because it contains invalid character:
 > `const { 'isMobile+': isMobile } = useBreakpoint()`
 
@@ -250,7 +264,8 @@ mediaQuery([')', 'content'])
 ## Is there any best practice suggestion?
 
 Yes! Use as fewer hooks as possible. It's always faster to have a single
-`isMobile` variable and have simple conditions based on it.
+`isMobile` variable and have simple conditions based on it. It's even better
+if you can solve your size related cases using pure CSS Media Queries.
 
 ## Why not using an `Object`? Why the `Array` structure?
 

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.47ae25361c658c1ec8ae.bundle.js"></script><script src="vendors~main.47ae25361c658c1ec8ae.bundle.js"></script><script src="main.47ae25361c658c1ec8ae.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.ed6b6fed4ea65daeaf50.bundle.js"></script><script src="vendors~main.ed6b6fed4ea65daeaf50.bundle.js"></script><script src="main.ed6b6fed4ea65daeaf50.bundle.js"></script></body></html>
diff --git a/docs/index.html b/docs/index.html
@@ -62,4 +62,4 @@
 
 
 
-              window['DOCS_MODE'] = false;</script><script src="runtime~main.870e8ee0658e83d05c6b.bundle.js"></script><script src="vendors~main.7cb89eef6fb5a60e11f4.bundle.js"></script><script src="main.a318f7d1a457ea4efb38.bundle.js"></script></body></html>
+              window['DOCS_MODE'] = false;</script><script src="runtime~main.870e8ee0658e83d05c6b.bundle.js"></script><script src="vendors~main.41c7967d96e28384f661.bundle.js"></script><script src="main.ecfb7176d7b1ca4a916e.bundle.js"></script></body></html>
diff --git a/docs/main.47ae25361c658c1ec8ae.bundle.js b/docs/main.47ae25361c658c1ec8ae.bundle.js
diff --git a/docs/main.47ae25361c658c1ec8ae.bundle.js.map b/docs/main.47ae25361c658c1ec8ae.bundle.js.map
diff --git a/docs/main.a318f7d1a457ea4efb38.bundle.js b/docs/main.a318f7d1a457ea4efb38.bundle.js
diff --git a/docs/main.ecfb7176d7b1ca4a916e.bundle.js b/docs/main.ecfb7176d7b1ca4a916e.bundle.js
Original file line number	Diff line number	Diff line change
Expand Up		@@ -130,4 +130,4 @@



		window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.47ae25361c658c1ec8ae.bundle.js"></script><script src="vendors~main.47ae25361c658c1ec8ae.bundle.js"></script><script src="main.47ae25361c658c1ec8ae.bundle.js"></script></body></html>
		window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.ed6b6fed4ea65daeaf50.bundle.js"></script><script src="vendors~main.ed6b6fed4ea65daeaf50.bundle.js"></script><script src="main.ed6b6fed4ea65daeaf50.bundle.js"></script></body></html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -62,4 +62,4 @@



		window['DOCS_MODE'] = false;</script><script src="runtime~main.870e8ee0658e83d05c6b.bundle.js"></script><script src="vendors~main.7cb89eef6fb5a60e11f4.bundle.js"></script><script src="main.a318f7d1a457ea4efb38.bundle.js"></script></body></html>
		window['DOCS_MODE'] = false;</script><script src="runtime~main.870e8ee0658e83d05c6b.bundle.js"></script><script src="vendors~main.41c7967d96e28384f661.bundle.js"></script><script src="main.ecfb7176d7b1ca4a916e.bundle.js"></script></body></html>