Support custom breakpoints (#11)

* Initial breakpoint support * Add custom breakpoint example * Account for non-memoized breakpoints * Show breakpoint list in example
aragon · Nov 17, 2020 · dd60132 · dd60132
1 parent 619d069
commit dd60132
Show file tree

Hide file tree

Showing 10 changed files with 5,524 additions and 76 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,4 +1,4 @@
 {
   "packages": ["./"],
-  "sandboxes": ["/examples/simple-viewport"]
+  "sandboxes": ["/examples/simple-viewport", "/examples/custom-breakpoints"]
 }
diff --git a/examples/custom-breakpoints/index.html b/examples/custom-breakpoints/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Custom Breakpoints</title>
+  </head>
+
+  <body style="margin: 0">
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/custom-breakpoints/index.tsx b/examples/custom-breakpoints/index.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { ViewportProvider, useViewport } from 'use-viewport'
+
+const BREAKPOINTS = {
+  alpha: 500,
+  beta: 1000,
+  gamma: 1500,
+}
+
+function App() {
+  return (
+    <ViewportProvider breakpoints={BREAKPOINTS}>
+      <Content />
+    </ViewportProvider>
+  )
+}
+
+function Content() {
+  const { width, height, within, below, above, breakpoints } = useViewport()
+
+  return (
+    <div>
+      {below('beta') && <div>alpha</div>}
+      {within('beta', 'gamma') && <div>beta</div>}
+      {above('gamma') && <div>gamma</div>}
+      <p>
+        Current screen width is {width}px and the height is {height}px
+      </p>
+      <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+        {Object.keys(breakpoints).map((key) => (
+          <li key={key}>
+            {key}: {breakpoints[key]}px
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+ReactDOM.render(
+  <>
+    <App />
+    <style>
+      {`
+        body {
+          width: 100vw;
+          height: 100vh;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: sans-serif;
+          font-size: 18px;
+          line-height: 1.5;
+        }
+        h1 {
+          font-weight: 400;
+        }
+      `}
+    </style>
+  </>,
+  document.getElementById('root')
+)
diff --git a/examples/custom-breakpoints/package.json b/examples/custom-breakpoints/package.json
@@ -0,0 +1,17 @@
+{
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "use-viewport": "link:../.."
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "parcel": "^1.12.3",
+    "typescript": "^3.4.5"
+  }
+}
diff --git a/examples/custom-breakpoints/tsconfig.json b/examples/custom-breakpoints/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "removeComments": true,
+    "strictNullChecks": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "lib": ["es2015", "es2016", "dom"],
+    "types": ["node"],
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}