Fixed solver update on window resize featuer in <ConstraintLayout /> …

…component. Added hook. Added optional types to props. Fixed rollup configuration issue causing watch mode to fail after first trigger in development mode

README.md

@@ -117,3 +117,15 @@ It would be really helpful if you can star the project on [Github](https://githu
 ### Licence
 
 [MIT](https://github.com/kwameopareasiedu/react-constraint-layout/blob/master/LICENCE.md) (c) Kwame Opare Asiedu
+
+### Changelog
+
+-   1.0.2
+    -   Fixed solver update on window resize feature in `<ConstraintLayout />` component
+    -   Added `useWindowBreakpoints` hook. Handy for conditional rendering at different window breakpoints
+    -   Added optional types to props
+    -   Fixed rollup configuration issue causing watch mode to fail after first trigger in development mode
+-   1.0.1
+    -   Fixed issue [#1](https://github.com/kwameopareasiedu/react-constraint-layout/issues/1)
+-   1.0.0
+    -   Initial release

dist/index.d.ts

@@ -8,33 +8,33 @@ declare module "react-constraint-layout" {
         /** The view height in pixels */
         height: number | string;
         /** Top margin of the view relative to a constrained view on the top */
-        marginTop: number | string;
+        marginTop?: number | string;
         /** Left margin of the view relative to a constrained view on the left */
-        marginLeft: number | string;
+        marginLeft?: number | string;
         /** Right margin of the view relative to a constrained view on the right */
-        marginRight: number | string;
+        marginRight?: number | string;
         /** Bottom margin of the view relative to a constrained view on the bottom */
-        marginBottom: number | string;
+        marginBottom?: number | string;
         /** Indicates that the left of a view is aligned with the left of another view */
-        leftToLeftOf: string | Array<string>;
+        leftToLeftOf?: string | Array<string>;
         /** Indicates that the left of a view is aligned with the right of another view */
-        leftToRightOf: string | Array<string>;
+        leftToRightOf?: string | Array<string>;
         /** Indicates that the right of a view is aligned with the right of another view */
-        rightToRightOf: string | Array<string>;
+        rightToRightOf?: string | Array<string>;
         /** Indicates that the right of a view is aligned with the left of another view */
-        rightToLeftOf: string | Array<string>;
+        rightToLeftOf?: string | Array<string>;
         /** Indicates that the top of a view is aligned with the top of another view */
-        topToTopOf: string | Array<string>;
+        topToTopOf?: string | Array<string>;
         /** Indicates that the top of a view is aligned with the bottom of another view */
-        topToBottomOf: string | Array<string>;
+        topToBottomOf?: string | Array<string>;
         /** Indicates that the bottom of a view is aligned with the bottom of another view */
-        bottomToBottomOf: string | Array<string>;
+        bottomToBottomOf?: string | Array<string>;
         /** Indicates that the bottom of a view is aligned with the top of another view */
-        bottomToTopOf: string | Array<string>;
+        bottomToTopOf?: string | Array<string>;
         /** The horizontal bias of the component of the view if the width is less than the bound. Valid range is 0 to 100 */
-        horizontalBias: number;
+        horizontalBias?: number;
         /** The vertical bias of the component of the view if the height is less than the bound. Valid range is 0 to 100 */
-        verticalBias: number;
+        verticalBias?: number;
     }
 
     enum ConstraintGuideOrientation {
@@ -44,26 +44,42 @@ declare module "react-constraint-layout" {
 
     interface ConstraintLayoutProps extends ConstraintProps {
         /** ID of the guide. Necessary if other views are constrained to it */
-        id: string;
+        id?: string;
         /** Class of the layout */
-        className: string;
+        className?: string;
     }
 
     interface ConstrainedViewProps extends ConstraintProps, React.HTMLProps {
         /** Component name (or function) of the view. Defaults to "div" */
-        as: string | Function;
+        as?: string | Function;
     }
 
     interface ConstraintGuideProps {
         /** ID of the guide. Necessary if other views are constrained to it */
         id: string;
-        begin: number | string;
-        end: number | string;
-        percent: number | string;
+        /** Orientation of the guide. Can either be "horizontal" or "vertical" */
         orientation: ConstraintGuideOrientation;
+        /** Percentage of the parent ConstraintLayout's width from the left (or height from the top, if orientation is "vertical") */
+        percent?: number | string;
+        /** Number of pixels from left of parent ConstraintLayout's (or from top, if orientation is "vertical") */
+        begin?: number | string;
+        /** Number of pixels from right of parent ConstraintLayout's (or from bottom, if orientation is "vertical") */
+        end?: number | string;
     }
 
     export const ConstraintLayout: React.FunctionComponent<ConstraintLayoutProps>;
     export const ConstrainedView: React.FunctionComponent<ConstrainedViewProps>;
     export const ConstraintGuide: React.FunctionComponent<ConstraintGuideProps>;
+
+    /**  A reference to the current parent of a view. Same as "_parent" */
+    export const PARENT: string;
+
+    /**
+     * A react hook that returns state variables for specified window breakpoints. This is useful
+     * if some components are conditionally rendered at certaint window breakpoints.
+     * @param {Array} breakpoints An array of breakpoints sizes. Defaults to [576, 768, 992, 1200]
+     * @returns {Array} An array of same size as sizes with boolean state variables corresponding to
+     * each specified breakpoints that indicate if the window size has exceeded that breakpoint
+     */
+    export const useWindowBreakpoints: Function;
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-constraint-layout",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "React implementation of Android's ConstraintLayout",
     "author": "Kwame Opare Asiedu",
     "license": "MIT",
@@ -56,7 +56,7 @@
         "style-loader": "^1.1.1"
     },
     "peerDependencies": {
-        "react": "^16.12.0"
-    },
-    "dependencies": {}
+        "react": "^16.12.0",
+        "react-dom": "^16.12.0"
+    }
 }

rollup.config.js

@@ -19,5 +19,10 @@ module.exports = {
         }),
         terser()
     ],
-    external: ["react"]
+    watch: {
+        chokidar: {
+            usePolling: true
+        }
+    },
+    external: ["react", "react-dom"]
 };

src/constraint-layout.jsx

@@ -37,8 +37,8 @@ export const ConstraintLayout = ({ _ref, id, className, width, height, children
         // to make it also available to the parent ConstraintLayout
         if (_ref) _ref(rootRef.current);
         const onResize = () => solverRef.current.invalidate();
-        rootRef.current.addEventListener("resize", onResize);
-        return () => rootRef.current.removeEventListener("resize", onResize);
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
     }, []);
 
     const style = { position: "relative", overflow: "hidden", width, height };

src/index.js

@@ -1,4 +1,4 @@
-export * from "./constraint-layout";
-export * from "./constrained-view";
 export * from "./constraint-guide";
-export { PARENT } from "./utils";
+export * from "./constrained-view";
+export * from "./constraint-layout";
+export { PARENT, useWindowBreakpoints } from "./utils";

src/utils.js

@@ -1,3 +1,5 @@
+import { useState, useEffect } from "react";
+
 /**  A reference to the current parent of a view */
 export const PARENT = "_parent";
 
@@ -45,3 +47,33 @@ export const Dimension = {
 
 /** Determines if a specified value is defined (I.e. not undefined or null) */
 export const isDefined = value => ![undefined, null].includes(value);
+
+/**
+ * A react hook that returns state variables for specified window breakpoints
+ * @param {Array} breakpoints An array of breakpoints sizes. Defaults to [576, 768, 992, 1200]
+ * @returns {Array} An array of same size as sizes with boolean state variables corresponding to
+ * each specified breakpoints that indicate if the window size has exceeded that breakpoint
+ */
+export const useWindowBreakpoints = (breakpoints = [576, 768, 992, 1200]) => {
+    const [breakpointStates, setBreakpointStates] = useState(Array(breakpoints.length).fill(false));
+
+    const onWindowResize = () => {
+        const windowWidth = window.innerWidth;
+
+        setBreakpointStates(
+            breakpoints.map((breakpoint, i) => {
+                if (i === 0) return windowWidth < breakpoint;
+                if (i === breakpoints.length - 1) return windowWidth > breakpoints[i - 1];
+                return windowWidth >= breakpoints[i - 1] && windowWidth < breakpoint;
+            })
+        );
+    };
+
+    useEffect(() => {
+        onWindowResize();
+        window.addEventListener("resize", onWindowResize);
+        return () => window.removeEventListener("resize", onWindowResize);
+    }, []);
+
+    return breakpointStates;
+};