How To Create A Custom MUI Search Bar Component In NextJS?

Last Updated : 01 Jul, 2024

Creating a custom Material-UI (MUI) search bar in the NextJS application is a great way to enhance the user experience by providing seamless and stylish search functionality. In this article, we will guide you through the steps to create a custom MUI search bar component in a Next.js project.

Prerequisites

There are various ways to create a search bar in a Next.js application using Material-UI. Here are two possible approaches

Approach 1: Using Material-UI Text Field with State Management

This approach involves using the Material-UI Text Field component and managing the search input state within the component.

Syntax:

import React, { useState } from 'react';
import { TextField } from '@mui/material';

const SearchBar = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <TextField
      label="Search"
      variant="outlined"
      value={searchTerm}
      onChange={handleSearch}
      fullWidth
    />
  );
};

export default SearchBar;

Approach 2: Using Material-UI Autocomplete Component

This approach uses the Autocomplete component from Material-UI for an enhanced search bar with suggestions.

import React, { useState } from 'react';
import { Autocomplete, TextField } from '@mui/material';

const SearchBar = ({ options }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = (event, value) => {
    setSearchTerm(value);
  };

  return (
    <Autocomplete
      freeSolo
      options={options}
      value={searchTerm}
      onInputChange={handleSearch}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Search"
          variant="outlined"
          fullWidth
        />
      )}
    />
  );
};

export default SearchBar;

Steps to Create Application

Step 1: Create a Next.js Application

First, create a new Next.js application if you haven't already:

npx create-next-app my-search-bar-app
cd my-search-bar-app

Step 2: Install Material-UI

Next, install Material-UI and its dependencies:

npm install @mui/material @emotion/react @emotion/styled

Folder Structure:

Updated Dependencies:

{  
"dependencies": 
{    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.7.1",
    "@mui/material": "^5.2.0",
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

Example: To demonstrate creating a custom MUI search bar component in NextJs.

JavaScript

// pages/index.js:

import Head from 'next/head';
import SearchBar from '/pages/components/SearchBar';

export default function Home() {
    const options = ['Option 1', 'Option 2', 'Option 3'];

    return (
        <div>
            <Head>
                <title>Custom MUI Search Bar</title>
            </Head>
            <main>
                <h1>Custom MUI Search Bar</h1>
                <SearchBar options={options} />
            </main>
        </div>
    );
}

JavaScript

// components/SearchBar.js:

import React, { useState } from 'react';
import { Autocomplete, TextField } from '@mui/material';

const SearchBar = ({ options }) => {
    const [searchTerm, setSearchTerm] = useState('');

    const handleSearch = (event, value) => {
        setSearchTerm(value);
    };

    return (
        <Autocomplete
            freeSolo
            options={options}
            value={searchTerm}
            onInputChange={handleSearch}
            renderInput={(params) => (
                <TextField
                    {...params}
                    label="Search"
                    variant="outlined"
                    fullWidth
                />
            )}
        />
    );
};

export default SearchBar;

Output

The output will be a responsive search bar that allows users to input text and search through the provided options. Below is a screenshot of the expected output:

82ed8566-9284-49ca-ab06-d4571082d772-ezgifcom-video-to-gif-converter-(1) — How To Create A Custom MUI Search Bar Component In NextJS

How to create dynamic search box in ReactJS?

banu3513

Improve

Article Tags :