boxi

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-