Box

The Box component is a layout primitive that can be used to create any kind of layout.

It is just a div with some styles.

How to use

1import { Box } from '@devup-ui/react'
2
3function App() {
4  return <Box bg="red" flex={1} height="100px" width={100} />
5}
1import { Box } from '@devup-ui/react'
2
3function App() {
4  return <Box bg="red" flex={1} height="100px" width={100} />
5}

The Box component defined above will render like this:

1function App() {
2  return <div className="a b c d" />
3}
1function App() {
2  return <div className="a b c d" />
3}

1.a {
2  background: red;
3}
4.b {
5  flex: 1;
6}
7.c {
8  height: 100px;
9}
10.d {
11  width: 400px;
12}
1.a {
2  background: red;
3}
4.b {
5  flex: 1;
6}
7.c {
8  height: 100px;
9}
10.d {
11  width: 400px;
12}

If you pass a number without a unit to a style property, it will be automatically scaled by 4. This means 1 equals 4px, 2 equals 8px, and so on.

However, the following properties are exceptions and are not multiplied by 4:

opacity
flex
z-index
line-clamp
font-weight
line-height
scale
aspect-ratio
flex-grow
flex-shrink
order
grid-column, grid-column-start, grid-column-end
grid-row, grid-row-start, grid-row-end
animation-iteration-count
tab-size, moz-tab-size, -webkit-line-clamp

Rendering as Another Element

You can use the as prop to change the element type.

1import { Box } from '@devup-ui/react'
2
3function App() {
4  return <Box as="span" bg="red" />
5}
1import { Box } from '@devup-ui/react'
2
3function App() {
4  return <Box as="span" bg="red" />
5}

By using the as prop, you can render it as another element as shown below:

1function App() {
2  return <span className="a" />
3}
1function App() {
2  return <span className="a" />
3}

1.a {
2  background: red;
3}
1.a {
2  background: red;
3}