css-box-model - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

package.json

 {
   "name": "css-box-model",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Returns the css box model for a HTMLElement",
@@ -33,3 +33,3 @@ "author": "Alex Reardon <[e-mail]>",
     "babel-preset-flow": "^6.23.0",
-    "flow-bin": "^0.69.0",
+    "flow-bin": "^0.70.0",
     "jest": "^22.4.3",
@@ -36,0 +36,0 @@ "prettier": "1.12.0",

README.md

 # CSS box model 📦
 
-> Get the [CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) for a [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
+> Get detailed [CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) information about a [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
 
@@ -152,1 +152,66 @@ This library is useful for when you need to obtain detailed positioning information about an element. Any time you are using [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) you might want to consider using `css-box-model` instead to get more detailed information.
 ```
+
+### `createBox`
+
+> `({ borderBox, margin, border, padding }: CreateBoxArgs) => BoxModel`
+
+Allows you to create a `BoxModel` by passing in a `Rect` like shape and optionally your own `margin`, `border` and or `padding`.
+
+```js
+type CreateBoxArgs = {|
+  borderBox: AnyRectType,
+  margin?: Spacing,
+  border?: Spacing,
+  padding?: Spacing,
+|};
+```
+
+```js
+const borderBox: Spacing = {
+  top: 10,
+  right: 100,
+  left: 20,
+  bottom: 80,
+};
+const padding: Spacing = {
+  top: 10,
+  right: 20,
+  left: 20,
+  bottom: 10,
+};
+
+const box: BoxModel = createBox({ borderBox, padding });
+```
+
+### `getRect`
+
+> `(spacing: AnyRectType) => Rect`
+
+Given any `Rect` like shape, return a `Rect`
+
+```js
+const spacing: Spacing = {
+  top: 0,
+  right: 100,
+  bottom: 50,
+  left: 50,
+};
+
+const rect: Rect = getRect(spacing);
+
+console.log(rect);
+
+/*
+{
+  top: 0,
+  right: 100,
+  bottom: 50,
+  left: 50,
+  width: 100,
+  height: 50,
+  x: 0,
+  y: 0,
+  center: { x: 50, y: 50 },
+}
+*/
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

188269

increased by0.52%

Number of lines in readme file

217

increased by42.76%

No dependency changes