B ❐ X L
Layout primitives for the styled component age.
Installation
$ npm i react-boxl styled-components
Built with styled components which is required as a peer dependency
Usage
Create components with the boxl
function passing default props and styling.
// Examples.tsximport * as React from "react";import boxl from "boxl"; const Container = ; /** * Additional props may be statically defined * using an optional type parameter. */ interface SectionProps primary?: boolean; const Section = boxl<SectionProps> styled` // ⬅︎ tagged template literal à la styled-components ; background: white; border: 8px solid black; padding: 32px; `;
Direction Vertical (default)
const Vertical = <Container> <Section = /> <Section /> <Section /> </Container>;
Direction Horizontal
const Horizontal = <Container ="horizontal"> <Section = = /> <Section /> <Section /> </Container>;
API
Box
alignHorizontal?: "left" | "center" | "right"
Aligns children horizontally regardless of direction
(default: "left")
alignVertical?: "top" | "center" | "bottom"
Aligns children vertically regardless of direction
(default: "top")
childGrow?: number
Sets grow
on all children. Useful in combination with childWrap
.
Example:
childIdealWidth?: string (CSS length)
Sets idealWith
on all children. Useful in combination with childWrap
.
Example:
childWrap?: "auto" | "even"
Allows children to wrap when available space is exceeded
- "auto": children to wrap naturally
- "even": children that wrap maintain any set
idealWidth
orchildIdealWidth
which is useful for achieving an even grid layout
Example:
// Children wrap naturally // Children wrap evenly (orphans maintain idealWidth)
direction?: "horizontal" | "vertical"
Direction children will flow—stacked or side-by-side. (default "vertical")
Example:
// Children are stacked // Children are side-by-side
element?: string (HTML element—"a", "h1", etc.)
HTML element to be rendered (default "div")
Example:
// Anchor element will be rendered
grow?: number
Amount that Box should grow in relation to available space or siblings (default: 0)
Example:
idealWidth?: string (CSS length)
Optimal width considering content size and available space (i.e. flex-basis) (default: "left")
Note: Use alongside width or max/min-width styles
padding?: string (CSS length)
Adds padding and takes priority over padding set via style
spacing?: string (CSS length)
Defines gap between children
style?: string | template literal | (style) => style`tagged template literal`
Defines styling via plain string, template literal, or tagged template literal function. The last option allows interpolation of props including a theme if a styled-components
theme provider is present.
Note: See styled components docs for more info
Example:
// string // template literal // tagged template literal function
Develop
npm i
install project and test app depsnpm start
starts storybooknpm test:unit
runs unit testsnpm test:visual
runs visual tests (requires storybook to be running e.g.npm start
)npm test:visual:watch
runs visual tests in watch modenpm run build
compilesdist/
npm pack
generates.tgz
for local testing