Build A Custom InfoBox Component With React

Aug 5, 2025 by Luna Greco 44 views

Create Custom Component: InfoBox with Alert and Lucide Icon

Introduction

Hey guys! Today, we're diving deep into creating a custom component called InfoBox. This component will be based on the existing Alert component, enhanced with some cool features like default and destructive variants, and a slick Lucide "Info" icon. The goal here is to build a reusable and visually appealing component that can be used across our applications to display informational messages effectively. This is super important for maintaining consistency and providing a great user experience. We'll be focusing on making this component highly customizable and easy to integrate into any project. So, let's get started and see how we can bring this InfoBox to life!

When creating a custom component, it's essential to think about its reusability and flexibility. The InfoBox component should be versatile enough to handle different types of information and contexts. We'll explore how to define different variants, such as the default and destructive variants, which will allow us to visually distinguish the importance or urgency of the information being displayed. Additionally, incorporating the Lucide "Info" icon will add a clear visual cue, making it immediately recognizable as an informational element. This attention to detail in design and functionality will make our InfoBox a valuable asset in our component library.

Furthermore, the process of building this custom component involves several key steps, including setting up the basic structure, defining the properties (props) that the component will accept, and implementing the logic for rendering the component based on these props. We'll also be looking at how to use the Alert component as a foundation and extend its functionality to meet our specific needs. This approach allows us to leverage existing components and build upon them, saving time and effort while ensuring consistency with our design system. Throughout this article, we'll break down each step in detail, providing clear explanations and code examples to guide you through the process. By the end, you'll have a solid understanding of how to create your own custom components and how to effectively use them in your projects.

Setting Up the Development Environment

Before we jump into the code, it's crucial to have our development environment properly set up. This ensures a smooth and efficient workflow as we build our custom component. First, you'll need to have Node.js and npm (Node Package Manager) installed on your machine. These are essential for managing our project dependencies and running our development server. If you haven't already, you can download and install them from the official Node.js website. Once Node.js is installed, npm comes bundled with it, so you're good to go.

Next, let's create a new project directory and initialize a new npm project. Open your terminal, navigate to the location where you want to create your project, and run the following commands:

mkdir infobox-component
cd infobox-component
npm init -y

The mkdir command creates a new directory for our project, cd navigates into that directory, and npm init -y initializes a new npm project with default settings. This will create a package.json file in your project directory, which will keep track of our project's dependencies and scripts.

Now, we need to install the necessary dependencies. For this custom component, we'll need React, as we'll be building it as a React component. We'll also need the Alert component library (assuming you have one, or you can use a generic one like react-bootstrap or material-ui) and the lucide-react library for the "Info" icon. Run the following command to install these dependencies:

npm install react react-dom @radix-ui/react-alert lucide-react

Here, we're using @radix-ui/react-alert as an example of an Alert component library. You can replace this with your preferred library. Once the installation is complete, you'll find the dependencies listed in your package.json file. With our environment set up and dependencies installed, we're ready to start coding our InfoBox component!

Designing the InfoBox Component

The design phase is crucial for any custom component because it dictates how the component will look and function. For our InfoBox component, we want it to be visually appealing, informative, and easy to use. Let's break down the key design considerations:

Core Structure

At its core, the InfoBox component will be based on an Alert component. This means it will have a container with a specific background color, padding, and potentially a border. Inside this container, we'll have an icon (the Lucide "Info" icon) and the message text. The structure might look something like this:


  
    
      {message}

Here, we have a main div that acts as the container, an icon element, and a div for the message text. This structure provides a clear separation of concerns and makes it easy to style each element individually.

Variants

To make our InfoBox component versatile, we'll implement two variants: default and destructive. The default variant will be used for general informational messages and will have a subtle background color and icon color. The destructive variant, on the other hand, will be used for more critical messages, such as warnings or errors, and will have a more prominent background color (e.g., red) and icon color to grab the user's attention.

Lucide Icon

We'll use the Lucide "Info" icon to visually represent that the component is displaying informational content. This icon is clean and recognizable, making it a great choice for our InfoBox. We'll import the icon from the lucide-react library and include it in our component.

Styling

Styling is key to making our InfoBox component look polished and professional. We'll use CSS or a CSS-in-JS library (like styled-components) to style the component. The styling will include setting the background color, text color, padding, and border. We'll also need to style the icon and message text to ensure they are aligned and visually appealing.

By carefully considering these design aspects, we can create a custom component that is both functional and aesthetically pleasing. The goal is to provide a clear and consistent way to display informational messages in our applications.

Implementing the InfoBox Component

Now that we have our design in place, let's dive into the implementation of the InfoBox component. We'll be using React to build this component, so make sure you're comfortable with React syntax and concepts. We'll start by creating a new file for our component, then we'll define the component's structure, props, and styling.

Creating the Component File

First, let's create a new file named InfoBox.jsx in our project's src directory (or any directory you prefer for your components). This file will contain the code for our InfoBox component.

mkdir src
touch src/InfoBox.jsx

Defining the Component Structure

Open InfoBox.jsx in your code editor and let's start by defining the basic structure of our custom component. We'll import React, the Alert component (from @radix-ui/react-alert or your preferred library), and the Info icon from lucide-react. Then, we'll define a functional component called InfoBox that accepts props.

import React from 'react';
import { Alert, AlertTitle, AlertDescription } from '@radix-ui/react-alert';
import { Info } from 'lucide-react';

const InfoBox = ({ variant = 'default', title, message }) => {
  return (
    
      
        {title}
      
      
        {message}
      
    
  );
};

export default InfoBox;

In this code, we've defined a functional component InfoBox that accepts variant, title, and message as props. We've also set a default value for the variant prop to 'default'. The component returns an Alert component from @radix-ui/react-alert, which includes an AlertTitle and AlertDescription. The Info icon is also included to provide a visual cue.

Implementing Variants and Styling

Next, we'll implement the logic for handling the different variants (default and destructive) and apply styling accordingly. We'll use CSS-in-JS with styled-components for this, but you can use any styling approach you prefer. First, let's install styled-components:

npm install styled-components

Now, let's update our InfoBox.jsx file to include styling and variant handling:

import React from 'react';
import styled from 'styled-components';
import { Alert, AlertTitle, AlertDescription } from '@radix-ui/react-alert';
import { Info } from 'lucide-react';

const StyledAlert = styled(Alert)`
  padding: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: ${(props) =>
    props.variant === 'destructive' ? '#ffebee' : '#e8f5e9'};
  color: ${(props) => (props.variant === 'destructive' ? '#d32f2f' : '#388e3c')};
  border: 1px solid
    ${(props) => (props.variant === 'destructive' ? '#ef9a9a' : '#a5d6a7')};
`;

const StyledAlertTitle = styled(AlertTitle)`
  font-weight: bold;
  margin-bottom: 4px;
`;

const StyledAlertDescription = styled(AlertDescription)`
  font-size: 14px;
`;

const InfoBox = ({ variant = 'default', title, message }) => {
  return (
    
      
        
      
      
        {title}
      
      
        {message}
      
    
  );
};

export default InfoBox;

In this updated code, we've used styled-components to create styled versions of the Alert, AlertTitle, and AlertDescription components. The StyledAlert component's background color, text color, and border color are dynamically set based on the variant prop. If the variant is 'destructive', it will have a red background and border; otherwise, it will have a green background and border. We've also added some basic styling to the title and description.

Using the InfoBox Component

Now that our custom component is implemented, let's see how we can use it in our application. In your main application file (e.g., App.jsx), import the InfoBox component and use it to display informational messages.

import React from 'react';
import InfoBox from './src/InfoBox';

const App = () => {
  return (
    
      <h1>InfoBox Example</h1>
      
        This is a default info message.
      
      
        This is a destructive info message.
      
    
  );
};

export default App;

In this example, we've imported the InfoBox component and used it twice: once with the default variant and once with the destructive variant. This demonstrates how easy it is to use our custom component and how the different variants are rendered.

Testing the InfoBox Component

Testing is a crucial step in the development process, ensuring that our custom component works as expected. We want to verify that the InfoBox component renders correctly, displays the correct content, and handles different variants appropriately. There are several testing approaches we can take, including unit testing, integration testing, and end-to-end testing. For this example, we'll focus on unit testing, which involves testing individual components in isolation.

Setting Up Testing Environment

Before we can write our tests, we need to set up our testing environment. We'll use Jest as our testing framework and React Testing Library for rendering and interacting with our components. Let's install these dependencies:

npm install --save-dev jest @babel/preset-env @babel/preset-react @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Here's a breakdown of the packages we're installing:

jest: A popular JavaScript testing framework.
@babel/preset-env and @babel/preset-react: Babel presets for transpiling our code to be compatible with Jest.
@testing-library/react: A library for testing React components by focusing on user interactions.
@testing-library/jest-dom: Provides custom Jest matchers for working with the DOM.
jest-environment-jsdom: A Jest environment that simulates a browser environment.

Next, we need to configure Babel and Jest. Create a babel.config.js file in the root of your project with the following content:

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

This tells Babel to use the @babel/preset-env and @babel/preset-react presets to transpile our code.

Then, update your package.json file to include a test script:

  "scripts": {
    "test": "jest"
  }

Writing Unit Tests

Now, let's write some unit tests for our InfoBox component. Create a new file named InfoBox.test.jsx in the src directory (or a __tests__ directory if you prefer). This file will contain our test cases.

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import InfoBox from './InfoBox';

describe('InfoBox Component', () => {
  it('should render the default variant', () => {
    render(<InfoBox title="Default Title" message="Default message" />);
    expect(screen.getByText('Default Title')).toBeInTheDocument();
    expect(screen.getByText('Default message')).toBeInTheDocument();
  });

  it('should render the destructive variant', () => {
    render(
      
    );
    expect(screen.getByText('Destructive Title')).toBeInTheDocument();
    expect(screen.getByText('Destructive message')).toBeInTheDocument();
  });
});

In this test file, we've defined two test cases: one for the default variant and one for the destructive variant. We use the render function from @testing-library/react to render our component, and then we use the screen object to query for elements. The expect function, along with the toBeInTheDocument matcher from @testing-library/jest-dom, is used to assert that the elements are rendered correctly.

Running Tests

To run our tests, simply run the following command in your terminal:

npm test

Jest will run the tests and display the results. If all tests pass, congratulations! Your InfoBox component is working as expected. If any tests fail, review the error messages and update your component or tests accordingly.

Conclusion

Alright guys, we've reached the end of our journey in creating a custom component: the InfoBox. We've covered a lot of ground, from setting up our development environment to designing the component, implementing it with React and styled-components, and finally, testing it to ensure it works correctly. By now, you should have a solid understanding of how to build your own custom components and integrate them into your applications.

The InfoBox component we've created is a versatile and reusable element that can be used to display informational messages in a consistent and visually appealing way. We've implemented two variants—default and destructive—to handle different types of messages, and we've incorporated the Lucide "Info" icon to provide a clear visual cue. This attention to detail ensures that our component is both functional and aesthetically pleasing.

The process of building a custom component involves several key steps: defining the component's structure, determining the properties (props) it will accept, implementing the rendering logic, and applying styling. We've also emphasized the importance of testing to ensure that the component behaves as expected. By following these steps, you can create high-quality components that enhance the user experience and maintain consistency across your applications.

Remember, the key to successful component development is to think about reusability and flexibility. A well-designed component should be versatile enough to handle different use cases and easy to integrate into various parts of your application. By creating a library of custom components, you can streamline your development process and ensure a consistent look and feel across your projects. So, keep experimenting, keep building, and keep pushing the boundaries of what you can create!