🚀 Socket Launch Week 🚀 Day 2: Introducing Repository Labels and Security Policies.Learn More
Socket
Sign inDemoInstall
Socket

material-ui-search-bar

Package Overview
Dependencies
Maintainers
4
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

material-ui-search-bar

Material style search bar

1.0.1
latest
Source
npm
Version published
Weekly downloads
7K
-26.28%
Maintainers
4
Weekly downloads
 
Created
Source

Example

See this component in action

Installation

npm i --save material-ui-search-bar

Note: If you're still using Material-UI v3, please install v0.x of the search bar using npm i --save material-ui-search-bar@beta

Usage

The SearchBar is a controlled input, meaning that you need to keep the input state. This allows for much flexibility, e.g. you can change and clear the search input just by changing its props.

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)}
  />
);

SearchBar Properties

NameTypeDefaultDescription
cancelOnEscapeboolWhether to clear search on escape
classes*objectOverride or extend the styles applied to the component.
classNamestring''Custom top-level class
closeIconnode<ClearIcon style={{ color: grey[500] }} />Override the close icon.
disabledboolfalseDisables text field.
onCancelSearchfuncFired when the search is cancelled.
onChangefuncFired when the text value changes.
onRequestSearchfuncFired when the search icon is clicked.
placeholderstring'Search'Sets placeholder text for the embedded text field.
searchIconnode<SearchIcon style={{ color: grey[500] }} />Override the search icon.
styleobjectnullOverride the inline-styles of the root element.
valuestring''The value of the text field.

* required property

Any other properties supplied will be spread to the underlying Input component.

License

The files included in this repository are licensed under the MIT license.

Keywords

react

FAQs

Package last updated on 24 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts