ResponsiveAutocomplete

A responsive React component that mimics Material-UI's Autocomplete and adapts to mobile with a full-screen Experience for a better UX.

---

✨ Features

• ✅ Support Mutiple MUI version (4,5 & 6)
• ✅ Responsive Design – switches between standard and fullscreen layouts automatically
• ✅ Mobile Optimization – mobile version takes full screen for better mobile experience
• ✅ Customizable Back Button & Layout – add styles with the available props
• ✅ Fully Compatible with MUI Autocomplete – just swap your import, and it works
• ✅ Zero breaking changes: use it exactly like mui Autocomplete

---

Getting Started

# 1. Install dependencies
npm install

# 2. Start the development server
npm start

Components

There are 2 components that can be used from this package

• Autocomplete for muiv5 and muiv6 versions

import Autocomplete  from 'react-responsive-autocomplete';

• Autocomplete for muiv4 version

import  Autocomplete from 'react-responsive-autocomplete/v4';

Mobile View

Desktop View

⚙️ Props

Autocomplete

All standard props from MUI v5/v6 Autocomplete are supported.

Prop	Type	Description
mobilebackgroundClassName	string	Optional class added to the fullscreen container on mobile
backButtonClassName	string	Optional class added to the back shown in mobile fullscreen
mobileBackgroundSx	object	Optional sz added to the fullscreen container on mobile
backButtonSx	object	Optional sx added to the back shown in mobile fullscreen

AutocompleteV4

All standard props from MUI v4 Autocomplete are supported.

Prop	Type	Description
mobilebackgroundClassName	string	Optional class added to the fullscreen container on mobile
backButtonClassName	string	Optional class added to the back shown in mobile fullscreen

Customization Tips

• Use mobileDivClassName to tweak mobile fullscreen layout

• Use backButtonClassName to position or restyle the back button