CODEWITHSUNDEEP
reactjsmaterial-ui
Thananjaya S
Thananjaya S

Reputation: 1679

How to add search bar in AppBar of material-ui?

I want to implement Search bar in the center of App bar of material-ui. I have tried all possible ways and I have referred this code snippet , but can't find a solution for it.

My code snippet is

<div>
  <MuiThemeProvider muiTheme={muiTheme} class="navbar">
    <AppBar 
     title='Module Name' 
     onTitleClick={handleClick} 
     iconElementRight={<FlatButton label='LogOut' />}
     onClick = {handleclick}
    />
   </MuiThemeProvider>
 </div>

It will be helpful if I get any solution for it.

Upvotes: 3

Views: 14163

Answers (5)

The ReBel
The ReBel

Reputation: 61

  1. Using only Material UI
<AppBar>
    <Toolbar>
        <Input 
            type="search"
            />
    </Toolbar>
</AppBar>

You can check the docs here.

  1. Installing another framework.
npm i material-ui-search-bar

A basic code snippet can be found on the main page.

import SearchBar from "material-ui-search-bar";
// *snip*
    
return (
    <SearchBar
        value={this.state.value}
        onChange={(newValue) => this.setState({ value: newValue })}
        onRequestSearch={() => doSomethingWith(this.state.value)}
    />
    );

You can check the docs here.

Upvotes: 1

Siddharth Jain
Siddharth Jain

Reputation: 880

Pass a prop in the AppBar component

 <AppBar
    title="Title"
    showSearch= {
      <Toolbar>
        <InputBase placeholder="Search" />
      </Toolbar>
    }
/>

You can handle AppBar component based on customName prop like if you're passing this prop then it should show Search else not.

Upvotes: 0

Ankit Kumar Rajpoot
Ankit Kumar Rajpoot

Reputation: 5600

Try this

<AppBar>
  <Toolbar>
    <InputBase placeholder="Search for products, brands and more" />
  </Toolbar>
</AppBar>

Upvotes: 0

user7219771
user7219771

Reputation:

you can add a ToolBar contains a Textfield you can check documentation ,this is a Demo

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104379

You can use children property to add any node in AppBar, like this:

<AppBar
    title="Title"
    children= {
      <input />
    }
/>

Use styling on input field, check the working codesandbox.

Upvotes: 4

Related Questions