masua 0.10.0 → 0.10.2

package/README.md

@@ -4,7 +4,7 @@
 
 # masua
 
-Simple masonry layout library in TypeScript.
+Simple masonry layout library in TypeScript. Initially forked from [minimasonry](https://github.com/Spope/MiniMasonry.js) by Spope.
 
 ## Usage
 
@@ -12,6 +12,16 @@ Simple masonry layout library in TypeScript.
 import { grid } from 'masua'
 
 grid(document.querySelector('#my-grid'))
+// With configuration options.
+grid(document.querySelector('#my-custom-grid'), {
+  gutter: 20,
+  baseWidth: 300,
+  minify: false,
+  surroundingGutter: true,
+  ultimateGutter: 10,
+  direction: 'rtl',
+  wedge: true,
+})
 ```
 
 ## React
@@ -20,7 +30,7 @@ grid(document.querySelector('#my-grid'))
 import { Grid } from 'masua'
 
 const MyGrid = () => (
-  <Grid>
+  <Grid disabled={window.innerWidth < 501}>
     <Box />
     <Box size={3} />
     <Box size={2} />

package/index.ts

@@ -263,5 +263,6 @@ export function grid(element: HTMLElement | string, configuration: Partial<Confi
 
   return {
     destroy: () => destroy(state),
+    update: () => layout(state),
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "masua",
   "description": "Simple masonry layout library in TypeScript.",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "repository": "github:tobua/masua",
   "homepage": "https://tobua.github.io/masua",
   "license": "MIT",
@@ -22,7 +22,7 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^18.2.64",
+    "@types/react": "^18.2.65",
     "padua": "^4.0.0"
   },
   "peerDependencies": {

package/react.tsx

@@ -17,8 +17,11 @@ const configurationProperties = [
   'wedge',
 ]
 
+let instance: any
+
 export function Grid({
   disabled = false,
+  children,
   ...props
 }: JSX.IntrinsicElements['div'] & Partial<ReactConfiguration>) {
   const gridRef = useRef(null)
@@ -36,8 +39,17 @@ export function Grid({
 
   useEffect(() => {
     if (disabled) return () => {}
-    return grid(gridRef.current, configurationProps).destroy
-  }, [])
+    if (instance) {
+      instance.update()
+      return instance.destroy
+    }
+    instance = grid(gridRef.current, configurationProps)
+    return instance.destroy
+  }, [children])
 
-  return <div ref={gridRef} {...props} />
+  return (
+    <div ref={gridRef} {...props}>
+      {children}
+    </div>
+  )
 }