Boxi

Boxi is a library that allows you to specify styles such as margins and padding for Div elements.
The styles that can be specified are based on the Material-ui Box.

Tags

react

Advantages

• You can pass properties such as margins, padding, colors, and alignment to the Div element. It's easier to write than inline style.
• Written in CSS in JS using Emotion, it should have a performance advantage over inline style. (Unmeasured)

Installation

• yarn

  yarn add boxi

• npm

  npm install boxi

Usage

import Box from 'boxi';

// You can define any props as below
const Component = () => <Box m="4px">Children</Box>;

API

borders

| Prop | CSS property | | ------------ | ------------- | | border | border | | borderTop | border-top | | borderLeft | border-left | | borderRight | border-right | | borderBottom | border-bottom | | borderColor | border-color | | borderRadius | border-radius |

<Box border="1px" borderColor="red"></Box>
<Box borderTop="1px"></Box>

display

| Prop | CSS property | | ------------ | ------------- | | display | display | | overflow | overflow | | textOverflow | text-overflow | | visiblity | visiblity | | whiteSpace | white-space |

<Box whiteSpace="nowrap"></Box>

flexbox

| Prop | CSS property | | -------------- | --------------- | | flexBasis | flex-basis | | flexDirection | flex-direction | | flexWrap | flex-wrap | | justifyContent | justify-content | | justifyItems | justify-items | | justifySelf | justify-self | | alignItems | align-items | | alignContent | align-content | | order | order | | flex | flex | | flexGrow | flex-grow | | flexShrink | flex-shrink | | alignSelf | align-self |

<Box display="flex" justifyContent="space-between" alignItems="center">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Box>

palette

| Prop | CSS property | | --------------- | ---------------- | | color | color | | background | background | | backgroundColor | background-color |

<Box color="red" backgroundColor="gray">
  colored box
</Box>

positions

| Prop | CSS property | | -------- | ------------ | | position | position | | zIndex | z-index | | top | top | | right | right | | bottom | bottom | | left | left |

<Box zIndex="1000"></Box>

shadows

| Prop | CSS property | | --------- | ------------ | | boxShadow | boxShadow |

<Box boxShadow="10px 10px 10px 10px rgba(0,0,0,0.4)"></Box>

sizing

| Prop | CSS property | | --------- | ------------ | | width | width | | maxWidth | max-width | | minWidth | min-width | | height | height | | maxHeight | max-height | | minHeight | min-height | | boxSizing | box-sizing |

<Box width="100%"></Box>
<Box height="100px"></Box>

spacing

| Prop | CSS property | | ---- | --------------------------- | | m | margin | | mt | margin-top | | mr | margin-right | | mb | margin-bottom | | ml | margin-left | | mx | margin-left, margin-right | | my | margin-top, margin-bottom | | p | padding | | pt | padding-top | | pr | padding-right | | pb | padding-bottom | | pl | padding-left | | px | padding-left, padding-right | | py | padding-top, padding-bottom |

<Box mt="10px">text</Box>
<Box px="10px">text</Box>

Some people find the prop shorthand confusing, you can use the full version if you prefer:

<Box marginTop="10px">text</Box>
<Box paddingX="10px">text</Box>

typography

| Prop | CSS property | | ------------- | -------------- | | fontFamily | font-family | | fontSize | font-size | | fontStyle | font-style | | fontWeight | font-weight | | latterSpacing | letter-spacing | | lineHeight | line-height | | textAlign | text-align |

<Box textAlign="center">text</Box>

Contributors

• mura-