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.
react
- 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)
-
yarn
yarn add boxi -
npm
npm install boxi
import Box from 'boxi';
// You can define any props as below
const Component = () => <Box m="4px">Children</Box>;| 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>| Prop | CSS property |
|---|---|
| display | display |
| overflow | overflow |
| textOverflow | text-overflow |
| visiblity | visiblity |
| whiteSpace | white-space |
<Box whiteSpace="nowrap"></Box>| 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>| Prop | CSS property |
|---|---|
| color | color |
| background | background |
| backgroundColor | background-color |
<Box color="red" backgroundColor="gray">
colored box
</Box>| Prop | CSS property |
|---|---|
| position | position |
| zIndex | z-index |
| top | top |
| right | right |
| bottom | bottom |
| left | left |
<Box zIndex="1000"></Box>| Prop | CSS property |
|---|---|
| boxShadow | boxShadow |
<Box boxShadow="10px 10px 10px 10px rgba(0,0,0,0.4)"></Box>| 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>| 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>| 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>