Initial commit

Author: walrusk

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.npmignore

@@ -0,0 +1,3 @@
+node_modules
+src
+.rush

README.md

@@ -0,0 +1,62 @@
+# React Responsive Div
+
+Responsive React container using breakpoints based on container (not viewport) width.
+
+The core of https://github.com/philipwalton/responsive-components ported to React
+using hooks to manage creation/cleanup of observers for each container instead of using a global observer.
+
+### Default breakpoints:
+
+{
+  SM: 384,
+  MD: 576,
+  LG: 768,
+  XL: 960,
+}
+
+## Usage:
+
+```sh
+npm install --save @walrusk/react-responsive-div
+```
+
+```javascript
+import Div from '@walrusk/react-responsive-div';
+```
+
+```javascript
+<Div>
+  ...
+  responsive content
+  ...
+</Div>
+```
+
+```javascript
+const customBreakpoints = {
+  SM: 384,
+  MD: 576,
+  LG: 768,
+  XL: 960,
+};
+<Div breakpoints={customBreakpoints}>
+  ...
+  content
+  ...
+</Div>
+```
+
+## Output based on container size:
+```html
+<div class="SM">... content ...</div>
+or
+<div class="SM MD">... content ...</div>
+or
+<div class="SM MD LG">... content ...</div>
+or
+<div class="SM MD LG XL">... content ...</div>
+```
+
+## Notes:
+
+Considered adjusting behaviour to only set class of current breakpoint e.g. medium being `MD` instead of `SM MD`. May add a prop for this in future but not sure yet if this is actually needed. In most cases in CSS you want to target both and you can target small only with this pattern using `.SM:not(.MD)`.

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@walrusk/react-responsive-div",
+  "version": "0.1.0",
+  "description": "Responsive React container using breakpoints based on container (not viewport) width.",
+  "homepage": "https://github.com/walrusk/react-responsive-div#readme",
+  "author": "Rob Norman <walrusk@gmail.com> (https://magnetnet.net)",
+  "main": "dist/Div.js",
+  "module": "dist/Div.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "NODE_ENV=production && rm -rf dist && mkdir dist && babel src --out-dir dist --copy-files"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1"
+  },
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/walrusk/react-responsive-div.git"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "babel": {
+    "presets": [
+      "react",
+      "env",
+      "stage-2"
+    ]
+  }
+}

src/Div.js

@@ -0,0 +1,43 @@
+import React, {useRef, useEffect} from 'react';
+
+// Default breakpoints that should apply to all observed
+// elements that don't define their own custom breakpoints.
+const defaultBreakpoints = {
+  SM: 384,
+  MD: 576,
+  LG: 768,
+  XL: 960,
+};
+
+export default function Div({ breakpoints: customBreakpoints, ...props }) {
+  const breakpoints = customBreakpoints || defaultBreakpoints;
+  const containerRef = useRef(null);
+  useResizeObserver(breakpoints, containerRef);
+  return (
+    <div ref={containerRef} {...props} />
+  );
+}
+
+export function useResizeObserver(breakpoints, containerRef) {
+    useEffect(() => {
+      if (window.ResizeObserver) {
+        const ro = new window.ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            // Update the matching breakpoints on the observed element.
+            Object.keys(breakpoints).forEach(breakpoint => {
+              const minWidth = breakpoints[breakpoint];
+              if (entry.contentRect.width >= minWidth) {
+                entry.target.classList.add(breakpoint);
+              } else {
+                entry.target.classList.remove(breakpoint);
+              }
+            });
+          });
+        });
+        ro.observe(containerRef.current);
+        return () => ro.disconnect();
+      } else if (process && process.env.NODE_ENV === 'development') {
+        console.warn('Resize observer not supported');
+      }
+    }, []);
+}