1.2.1 • Published 5 years ago

css-box-model v1.2.1

Weekly downloads
836,410
License
MIT
Repository
github
Last release
5 years ago

css-box-model 📦

Get accurate and well named CSS Box Model information about a Element.

Build Status npm dependencies Downloads per month min minzip

Any time you are using Element.getBoundingClientRect() you might want to consider using css-box-model instead to get more detailed box model information.

Usage

// @flow
import { getBox } from 'css-box-model';

const el: HTMLElement = document.getElementById('foo');
const box: BoxModel = getBox(el);

// profit

Installation

## yarn
yarn add css-box-model

# npm
npm install css-box-model --save

The CSS Box Model

the box model

Box typeComposition
Margin boxmargin + border + padding + content
Border boxborder + padding + content
Padding boxpadding + content
Content boxcontent

This our returned BoxModel:

export type BoxModel = {|
  // content + padding + border + margin
  marginBox: Rect,
  // content + padding + border
  borderBox: Rect,
  // content + padding
  paddingBox: Rect,
  // content
  contentBox: Rect,
  // for your own consumption
  border: Spacing,
  padding: Spacing,
  margin: Spacing,
|};

// Supporting types

// This is an extension of DOMRect and ClientRect
export type Rect = {|
  // ClientRect
  top: number,
  right: number,
  bottom: number,
  left: number,
  width: number,
  height: number,
  // DOMRect
  x: number,
  y: number,
  // Rect
  center: Position,
|};

export type Position = {|
  x: number,
  y: number,
|};

export type Spacing = {
  top: number,
  right: number,
  bottom: number,
  left: number,
};

API

getBox

(el: HTMLElement) => BoxModel

Use getBox to return the box model for an element

withScroll

(original: BoxModel, scroll?: Position = getWindowScroll()) => BoxModel

This is useful if you want to know the box model for an element relative to a page

const el: HTMLElement = document.getElementById('app');
const box: BoxModel = getBox(el);
const withScroll: BoxModel = withScroll(box);

You are welcome to pass in your own scroll. By default we we use the window scroll:

const getWindowScroll = (): Position => ({
  x: window.pageXOffset,
  y: window.pageYOffset,
});

calculateBox

(borderBox: AnyRectType, styles: CSSStyleDeclaration) => BoxModel

This will do the box model calculations without needing to read from the DOM. This is useful if you have already got a ClientRect / DOMRect and a CSSStyleDeclaration as then we can skip computing these values.

const el: HTMLElement = document.getElementById('app');
const borderBox: ClientRect = el.getBoundingClientRect();
const styles: CSSStyleDeclaration = window.getComputedStyles(el);

const box: BoxModel = calculateBox(borderBox, styles);

AnyRectType allows for simple interoperability with any rect type

type AnyRectType = ClientRect | DOMRect | Rect | Spacing;

createBox

({ borderBox, margin, border, padding }: CreateBoxArgs) => BoxModel

Allows you to create a BoxModel by passing in a Rect like shape (AnyRectType) and optionally your own margin, border and or padding.

type CreateBoxArgs = {|
  borderBox: AnyRectType,
  margin?: Spacing,
  border?: Spacing,
  padding?: Spacing,
|};
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 });

Utility API

Functions to help you interact with the objects we provide

getRect

(spacing: AnyRectType) => Rect

Given any Rect like shape, return a Rect. Accepts any object that has top, right, bottom and right (eg ClientRect, DOMRect);

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 },
}
*/

expand

Used to expand a Spacing

(target: Spacing, expandBy: Spacing) => Spacing;
const original: Spacing = {
  top: 10,
  left: 11,
  right: 21,
  bottom: 22,
};

const expandBy: Spacing = {
  top: 1,
  left: 2,
  right: 3,
  bottom: 4,
};

const expanded: Spacing = expand(original, expandBy);

console.log(expanded);

/*
{
  // pulled back
  top: 8,
  left: 8
  // pushed forward
  bottom: 22,
  right: 22,
}
*/

shrink

Used to shrink a Spacing

(target: Spacing, shrinkBy: Spacing) => Spacing;
const original: Spacing = {
  top: 10,
  left: 10,
  right: 20,
  bottom: 20,
};

const shrinkBy: Spacing = {
  top: 2,
  left: 2,
  right: 2,
  bottom: 2,
};

const smaller: Spacing = shrink(original, shrinkBy);

console.log(smaller);

/*
{
  // pushed forward
  top: 12,
  left: 12
  // pulled back
  bottom: 18,
  right: 18,
}
*/
@verticon/utilsreact-beautiful-dnd-ledger@hola-ui/utils@infinitebrahmanuniverse/nolb-css-b@ahmedrowaihi/react-beautiful-dnd@everything-registry/sub-chunk-1419samf-custom-react-beautiful-dnd@mytch/react-bdndledger-react-beautiful-dndonpoint-react-beautiful-dndreact-dnd-beautifulreact-simple-drag-dropreact-pretty-dndnovacap-componentsreact-beautiful-dnd-grid-supportreact-beautiful-dnd-iframereact-beautiful-dnd-mobile-patchreact-beautiful-dnd-mouse-onlyreact-beautiful-dnd-nextreact-beautiful-dnd-short-pressreact-beautiful-dnd-suivireact-beautiful-dnd-temp-forkreact-beautiful-dnd-used-for-cabalareact-beautiful-dnd-used-private-1react-beautiful-dnd-with-custom-payloadreact-beautiful-dnd-xlxreact-beautiful-dndreact-beautiful-dnd-chuck-wu-privatereact-beautiful-dnd-chuck-wu-private-1react-beautiful-dnd-duckreact-beautiful-treesuivi-beautiful-dnd-with-custom-payloadsnaphy-beautiful-dndugnistreelab-dnd@armennalbandyan22/react-beautiful-dnd@atlaskit/pragmatic-drag-and-drop-autoscroll@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll@atlaskit/tree@atlaskit/drag-and-drop-autoscroll@atlaskit/drag-and-drop-beautiful-autoscroll@akojic27/react-beautiful-dnd@alpernative/tree@b12/metronome@beae-ui/utils@altimex-ui/react-utils@blocks/react-beautiful-dnd@bianic-ui/utils@beyond-labs/react-beautiful-dnd@brightalley/react-beautiful-dnd@buigabor/dnd@breeze2/react-beautiful-dnd@chakra-ui/vue-utils@chakra-xui/utils@11grossmane/react-beautiful-dnd-no-scroll@abenfield/react-beautiful-dnd@daniloisr/react-treeuse-rtg@fictivekin/react-beautiful-dnd@gsid/dnd@hello-pangea/dnd@hackr/chakra-ui-utils@hakuna-matata-ui/utils@happy-doc/dnd@figmayo/figmayo-ui@iamlemon/rbd@hoc-ht/react-simple-dnd@hoory/react-beautiful-dnd@hufort/react-beautiful-dnd@huygn/react-beautiful-dnd@gethigher/react-beautiful-dnd@krishna2323/react-beautiful-dnd@krotovic/dnd@luniand-ui/utils@measured/dnd@nebulae/react-beautiful-dnd@ninternal/react-beautiful-dnd@engineerforce/react-beautiful-dnd@erom/react-beautiful-dnd@marketmuse/react-beautiful-dnd@mo-fang/runtime@mog3n/react-beautiful-dnd@makeswift/controls@makeswift/host@makeswift/runtime@klarstrup/dnd@kanaries/react-beautiful-dnd@kanatayou/react-beautiful-dnd@kalamazoo/tree@itswendell/react-beautiful-dnd@jahez-js/react-beautiful-dnd-forked@kitemaker/react-beautiful-dnd@ilp64/react-beautiful-dnd@oliver-goh/dnd@rbalazsi/dnd-shadow-dom@react-forked/dnd@posturize/react-resizable-rotatable-draggable@rymarchikbot/react-beautiful-dnd@raisesistemas/react-beautiful-dnd@qianba/react-beautiful-dnd
1.2.1

5 years ago

1.2.0

5 years ago

1.1.3

5 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago

0.0.11

7 years ago

0.0.10

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago