Box components are one of the most basic but _powerful_ components ever to be used in react applications. Their behavior is simple but this simplicity is the basic foundation to composing more complex components together, allowing endless possibilities to create modern user interfaces. In this post we will be building a powerful reusable box component in react with just a few simple implementations inside the function. ## Write The Foundation The first thing we are going to do is to define our `Box` component with the _bare minimum_ like so: ```jsx function Box({ children, ...props }) { return

{children}

} ``` There are already two important things to see here: 1. The element we've chosen is `div`. This is the most basic element in the DOM that every reusable component needs to begin with. By default it takes an _entire block_. It's more intuitive if the element takes up the entire width where we need to configure it if needed rather than it being the other way around. 2. We _destructure_ `children` and _manually_ apply it to our `Box` component. I always like to do this with every component that _expects children_ because it is a _clear indication_ that the parent will be expecting to pass in some react node. It's also a best practice and provides more benefits to do it this way rather than passing it inside `props` where it is mysteriously being applied. Mystery goes against the declarative nature of React. Now we can use it in our `App` component: ```jsx import React from 'react' function Box({ children, ...props }) { return

{children}

} export default function App() { return Sally Montgomery } ``` For the sake of this tutorial we are going to pass in some styling ahead of time in the parent component so that we can clearly see what is being applied as we go along: ```jsx import React from 'react' function Box({ children, ...props }) { return

{children}

} export default function App() { return ( Sally Montgomery ) } ``` ![reusable-react-box-card-component1.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/reusable-react-box-card-component1.png) ## Being the Parent _for_ the Parent Our reusable `Box` component _could_ be finished here, but if we want to squeeze more capabilities into it _without reducing its current ability in reusablility_ we can customize our `Box` implementation to accept more props and handle them _without letting the parent handle them_. There are cases where the parent _should_ handle some props, but they should be _wanting_ to handle them such as being able to configure the `style` object which we already have above. Inside our `App` component we applied some style props: ```jsx export default function App() { return ( Sally Montgomery ) } ``` Why did we do that? Because if we didn't our `Box` will look like this: ![empty-react-box-component1.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/empty-react-box-component1.png) Think about it. Will every component that imports our Box component be passing in `style` all the time? Most likely otherwise they can just render a `div` element. We can allow some style props to be passed through without requiring the parent to declare a `style` object everytime: (note: I added in extra props that i'll be using in later in this post) ```jsx function Box({ children, backgroundColor, border, borderRadius, color, overflow, fontFamily, fontSize, fontWeight, minHeight, margin, padding, width, textAlign, style, ...props }) { return (

{children}

) } ``` That way our components won't have to manually pass in a whole `style` object to change a few styles: ```jsx export default function App() { return ( Sally Montgomery ) } ``` We also made sure that inside our `Box` component we place the `style` prop to be last so that it can override others _whenever the parent wants to_: ![react-box-component-spread-style-object-last1.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/react-box-component-spread-style-object-last1.png) This is a very convenient strategy that popular libraries like [@chakra-ui/react](https://chakra-ui.com/) do which improves the development experience (They have customized this fully which this post won't be doing because the point here is to guide users to that path). It's quicker, easier, reduces code and boilerplate. Lets use our `Box` component to create a _Card_: ```jsx export default function App() { return ( Profile

Sally Montgomery About me: I am a hard working individual who strives for success. I have a puppy named Cookie that I love very much because she always prevents me from falling into emotional thoughts and keeps me going. ) } ``` ![box-card-component-in-react1.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/box-card-component-in-react1.png) (Female avatar taken from [Freepik](https://www.flaticon.com/free-icons/brown-hair)) Looking good already! But we need to apply some spacing, font styling, and border to our female image which can be easily done because we made it easier in our `Box`. ## Do More, Work Less ```jsx export default function App() { return ( Profile

Sally Montgomery About me: I am a hard working individual who strives for success. I have a puppy named Cookie that I love very much because she always prevents me from falling into emotional thoughts and keeps me going. ) } ``` ![better-react-card-component-fancy1.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/better-react-card-component-fancy1.png) We can further optimize our `Box` component to make it even easier for parent components to work with by defaulting its props. Every application has a set of default _font_ styles to use throughout the app, so we'll make our `Box` default to these props in font: ```jsx function Box({ children, backgroundColor, border, borderRadius, color, overflow, fontFamily = 'Helvetica', fontSize = '1rem', fontWeight = 300, minHeight, margin, padding, width, textAlign, style, ...props }) { return (

{children}

) } ``` Now we can remove some code in our `App` since our `Box` handles them by default: ```jsx export default function App() { return ( Profile

Sally Montgomery About me: I am a hard working individual who strives for success. I have a puppy named Cookie that I love very much because she always prevents me from falling into emotional thoughts and keeps me going. ) } ``` The great thing about our `Box` component is that it can be _composed_ to create _more complex reusable_ components. That is where our reusable `Box` component _really_ shines because it already abstracts basic boilerplates so they can be used everywhere without worrying about the basic necessities: ```jsx function Card({ avatar, title, children, ...rootProps }) { return ( {avatar ? ( {avatar} ) : null} {title ? ( {title} ) : null} {children ? {children} : null} ) } export default function App() { return ( } title="Sally Montgomery" > About me: I am a hard working individual who strives for success. I have a puppy named Cookie that I love very much because she always prevents me from falling into emotional thoughts and keeps me going. ) } ``` ## When Boilerplate Strikes Back. You Strike Back Harder We can call it a day here. But if you look closely, we are starting to see `Box` everywhere so it eventually brings up the previous problem of writing boilerplate code again. There is a powerful strategy that some react libraries take advantage of which we can use for our `Box` component. We can declare a parameter that allows the parent to pass in a custom react element, element tag, or component as a prop: ```jsx function Box({ as: asProp = 'div', children, backgroundColor, border, borderRadius, color, overflow, fontFamily = 'Helvetica', fontSize = '1rem', fontWeight = 300, minHeight, margin, padding, width, textAlign, style, ...props }) { const Component = asProp return ( {children} ) } ``` ![react-box-component-custom-as-prop1.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/react-box-component-custom-as-prop1.png) ## Less Resources With that in place it can become handy when used in places like our `Card`: ![react-box-component-as-img-element-reusable1.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/react-box-component-as-img-element-reusable1.png) Doing this provides a nice benefit: We remove _one less component_ being created in the virtual dom. When used extensively in more components, your GPU will thank you. ## Promoting Laziness One other thing. It also enables use to apply props in lazy ways. For example below when we render our avatar props since `Box` can be a component we can directly take advantage of that and be super lazy like this: ```jsx const getCardAvatarProps = (avatar) => { return { as: 'img', width: 80, border: '4px solid cyan', backgroundColor: '#fff', borderRadius: '50%', overflow: 'hidden', ...(typeof avatar === 'string' ? { src: avatar } : React.isValidElement(avatar) ? { children: avatar } : avatar), } } function Card({ avatar, title, children, ...rootProps }) { return ( > {title ? ( {title} ) : null} {children ? {children} : null} ) } ``` ## Presets And another useful thing we can add to our `Box` is to allow some set of "presets" for certain props. For example, we can allow `fontSize` to be passed in as `'xl'`, `'lg'`, `'md'`, `'sm'`, or `'xs'`. If none of those are provided then it will just apply the value provided. This pushes the `Box` even further in its capabilities in being easier to work with: ```jsx function Box({ as: asProp = 'div', children, backgroundColor, border, borderRadius, color, mode = 'default', overflow, fontFamily = 'Helvetica', fontSize = '1rem', fontWeight = 300, minHeight, margin, padding, width, textAlign, style, ...props }) { const Component = asProp let modeStyles if (mode === 'modal') { modeStyles = { display: 'flex', justifyContent: 'center', alignItems: 'center', border: '12px solid #19A8F7', flexDirection: 'column', backgroundColor: '#1F3F50', color: '#eee', } } else if (mode === 'card') { modeStyles = { backgroundColor: '#fff', color: 'rgba(0, 0, 0, 0.75)', paddingBottom: 30, } } const otherStyles = { border, backgroundColor, borderRadius, color, fontFamily, fontSize, fontWeight, overflow, minHeight, margin, padding, width, textAlign, } if (fontSize) { if (fontSize === 'xl') otherStyles.fontSize = '2rem' else if (fontSize === 'lg') otherStyles.fontSize = '1.5rem' else if (fontSize === 'md') otherStyles.fontSize = '1.2rem' else if (fontSize === 'sm') otherStyles.fontSize = '1rem' else if (fontSize === 'xs') otherStyles.fontSize = '0.8rem' } return ( {children} ) } ``` The `Card` component doesn't even have to know about it and could just forward props to get the benefits it provides. For example in handling the `title` prop it can just take in an object and call it a day: ```jsx const getCardTitleProps = (title) => { return typeof title === 'string' ? { children: title } : title } function Card({ avatar, title, children, mode, ...rootProps }) { return ( {avatar ? ( {typeof avatar === 'string' ? null : avatar} ) : null} {children ? {children} : null} ) } ``` ![card-react-component-being-reusable-in-font-styles.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/card-react-component-being-reusable-in-font-styles.png) ## Putting it together to specialize with your app One last thing I want to mention here is what I like to do for my `Box` components that are specialized for my app. Its useful to create a `mode` prop that will switch styles according to the situation which will trigger a different _"feel"_ to it: ```jsx function Box({ as: asProp = 'div', children, backgroundColor, border, borderRadius, color, mode = 'default', overflow, fontFamily = 'Helvetica', fontSize = '1rem', fontWeight = 300, minHeight, margin, padding, width, textAlign, style, ...props }) { const Component = asProp let modeStyles if (mode === 'modal') { modeStyles = { display: 'flex', justifyContent: 'center', alignItems: 'center', border: '12px solid #19A8F7', flexDirection: 'column', backgroundColor: '#1F3F50', color: '#eee', } } else if (mode === 'card') { modeStyles = { backgroundColor: '#fff', color: 'rgba(0, 0, 0, 0.75)', paddingBottom: 30, } } return ( {children} ) } ``` ```jsx export default function App() { return ( About me: I am a hard working individual who strives for success. I have a puppy named Cookie that I love very much because she always prevents me from falling into emotional thoughts and keeps me going. ) } ``` Result: ![react-card-component-modal-mode-reusable1.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/react-card-component-modal-mode-reusable1.png) ```jsx export default function App() { return ( About me: I am a hard working individual who strives for success. I have a puppy named Cookie that I love very much because she always prevents me from falling into emotional thoughts and keeps me going. ) } ``` Result: ![card-component-in-react-reusable1-card-mode.png](https://jsmanifest.s3.us-west-1.amazonaws.com/posts/build-a-powerful-reusable-box-component-in-react/card-component-in-react-reusable1-card-mode.png) When implementing customized styles it's best not to adjust any width/height or any positioning but allow the parent to customize those instead. Otherwise when they come across an issue like overlapping elements it can become difficult for them to have your `Box` inline in combination to their own components. ## Conclusion And that concludes the end of this post! I found you found this to be valuable and look out for more in the future!

Posts tagged “box”

Build a Powerful Reusable Box Component in React