How to add styles to autocomplete in ReactJS ?
Autocomplete functionality in web applications is common for predictive user input. This article focuses on enhancing the visual appearance of ReactJS autocomplete components using Material-UI’s package, offering customization options for seamless integration with the overall application design.
Prerequisites:
Approach:
- On the Autocomplete element, className doesn’t apply to the text input as you might expect. You can’t use the className on the autocomplete component, you have to use the inputProps property.
- The inputProps is commonly used for (but not limited to) placeholder, event handlers (onFocus, onBlur, etc.), autoFocus, etc.
- You can customize the styles in inputProps in the above code.
- In the renderItem prop, you can add style as a set of styles that can be applied to improve the look of the items in the dropdown menu.
Steps to Create the React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app materialuiTable
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd materialuiTable
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install --save react-autocomplete
Project Structure:
Project Structure
package.json:
"dependencies": {
"react-autocomplete": "^1.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Now write down the following code in the App.js file
Javascript
import React, { useState } from 'react'
import Autocomplete from 'react-autocomplete'
function App() {
const [value, setValue] = useState( '' );
return (
<div style={{
display: 'flex' , flexDirection: 'column' ,
alignItems: 'center'
}}>
<div>
{ }
<h4 style={{
padding: '15px' ,
border: '13px solid #b4f0b4' ,
color: 'rgb(11, 167, 11)'
}}>
Geeks for Geeks : React
Autocomplete Component Styling
</h4>
</div>
<div>
<Autocomplete
items={[
{ label: 'C++' },
{ label: 'C' },
{ label: 'Python' },
{ label: 'JavaScript' },
{ label: 'Julia' },
{ label: 'Java' },
{ label: 'Objective C' },
{ label: 'C#' },
{ label: 'Dart' },
{ label: 'Perl' }
]}
shouldItemRender={(item, value
) => item.label.toLowerCase()
.indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item, isHighlighted) =>
<div style={{
background: isHighlighted ?
'#bcf5bc' : 'white'
}}
key={item.id}>
{item.label}
</div>
}
value={value}
onChange={e => setValue(e.target.value)}
onSelect={(val) => setValue(val)}
inputProps={{
style: {
width: '300px' , height: '20px' ,
background: '#e4f3f7' ,
border: '2px outset lightgray'
},
placeholder: 'Search language'
}}
/>
</div>
</div>
);
}
export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000
Autocomplete on select language
Last Updated :
23 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...