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
• grid-area
• column-count, columns, orphans, widows, zoom
• border-image, border-image-outset, border-image-slice, border-image-width
• mask-border, mask-border-outset, mask-border-slice, mask-border-width
• initial-letter, max-lines, shape-image-threshold
• fill-opacity, flood-opacity, stop-opacity, stroke-opacity, stroke-width, stroke-dashoffset, stroke-miterlimit

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}

as also takes a component (as={Link}, as={motion.div}) or a condition between names (as={href ? 'a' : 'button'}), which becomes an element for each name. undefined, null and false give the default element — div for Box. Any other value, such as a prop or `h${level}`, is read at runtime, once, and gives the default element when it is empty:

1function Card({ as }) {
2  return <Box as={as} bg="red" />
3}
1function Card({ as }) {
2  return <Box as={as} bg="red" />
3}

1function Card({ as }) {
2  return ((DevupAs0) => <DevupAs0 className="a" />)(as || 'div')
3}
1function Card({ as }) {
2  return ((DevupAs0) => <DevupAs0 className="a" />)(as || 'div')
3}