Create Horizontal ListBox with Syncfusion ListBox Component in React.

2 mins read

This guide demonstrates how to create a horizontal ListBox using Syncfusion’s ListBox component in a React application. The React ListBox component allows users to select one or more items from a list. By customizing the CSS, we can display the ListBox items horizontally.

Prerequisites

Ensure you have the following installed:

Node.js
A package manager like npm or Yarn
Create React App (optional)

Step 1: Install Syncfusion ListBox Package

First, you need to install the Syncfusion ListBox package for React. You can do this using npm or Yarn:

npm install @syncfusion/ej2-react-dropdowns --save
# or
yarn add @syncfusion/ej2-react-dropdowns

Step 2: Import the ListBox Component

In your React component file, import the ListBoxComponent from the Syncfusion package:

import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

Step 3: Define the CSS for Horizontal Display

Create a CSS file named index.css and include the following styles to arrange the ListBox items horizontally:

.e-listbox-wrapper {
  width: 50% !important;
}
.e-listbox-wrapper ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px !important;
}
li {
  flex-basis: 10%;
  white-space: nowrap;
  width: auto;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  position: relative;
}
.custom-list-item {
  overflow: hidden;
}

Step 4: Create the ListBox Component

In your React component, create the ListBoxComponent and pass the data source to it:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import './index.css';
import * as data from './dataSource.json';

const Default = () => {
    const listData = data["info"];
    return (
        <div className='col-lg-12 control-section'>
            <div id='listbox'>
                <h4>Select your favorite car</h4>
                <ListBoxComponent dataSource={listData}/>
            </div>
        </div>
    );
};

export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Step 5: Render the Component

Make sure to render the Default component in your application’s root element:

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Output Sample

To view a live example of the horizontal ListBox, visit the following link: Horizontal ListBox Sample.

Additional References

For more information on Syncfusion’s ListBoxComponent and other features, refer to the following resources:

By following these steps, you can successfully integrate a horizontal ListBox into your React application using Syncfusion’s components and customize it according to your design requirements.

Conclusion

I hope you enjoyed learning about how to create Horizontal ListBox with Syncfusion ListBox Component in React.

You can refer to our React ListBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React ListBox example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)