• Stars
    star
    260
  • Rank 157,160 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Material design search bar

Material Search Bar

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

Name Type Default Description
cancelOnEscape bool Whether to clear search on escape
classes* object Override or extend the styles applied to the component.
className string '' Custom top-level class
closeIcon node <ClearIcon style={{ color: grey[500] }} /> Override the close icon.
disabled bool false Disables text field.
onCancelSearch func Fired when the search is cancelled.
onChange func Fired when the text value changes.
onRequestSearch func Fired when the search icon is clicked.
placeholder string 'Search' Sets placeholder text for the embedded text field.
searchIcon node <SearchIcon style={{ color: grey[500] }} /> Override the search icon.
style object null Override the inline-styles of the root element.
value string '' 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.

More Repositories

1

material-ui-chip-input

A chip input field using Material-UI.
JavaScript
739
star
2

material-auto-rotating-carousel

Introduce users to your app with this Material-style carousel.
JavaScript
431
star
3

mdi-material-ui

Material-UI SvgIcon components for Material Design Icons.
JavaScript
328
star
4

material-ui-image

Material style image with loading animation
JavaScript
214
star
5

material-ui-time-picker

A time picker for Material-UI.
JavaScript
127
star
6

material-ui-rating

Rate something with style.
JavaScript
88
star
7

material-ui-snackbar-provider

A convenient way to use material-ui's snackbars.
JavaScript
81
star
8

material-ui-password-field

A password field using Material-UI.
JavaScript
58
star
9

material-ui-fullscreen-dialog

A fullscreen dialog for Material-UI.
JavaScript
58
star
10

electron-react-material-ui

Quick boilerplate for an electron react app with material ui
JavaScript
37
star
11

material-ui-toggle-icon

An animated toggle icon for Material-UI.
JavaScript
35
star
12

crypto-trading-bot

A trading bot that does what you order him to do (use at your own risk)
TypeScript
30
star
13

material-ui-bottom-sheet

Bottom sheets slide up from the bottom of the screen to reveal more content.
JavaScript
29
star
14

codify

TypeScript
17
star
15

material-ui-feature-discovery-prompt

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.
JavaScript
17
star
16

material-ui-settings-panel

A settings component in material ui style inspired by google admin console and google inbox.
JavaScript
16
star
17

material-ui-dots

Just some animated dots for pagination.
JavaScript
14
star
18

material-ui-file-dropzone

File selection components with drag'n'drop support for Material-UI.
JavaScript
11
star
19

react-hero-animation

A small react library for hero animations.
JavaScript
8
star
20

react-props-md-table

A markdown table generator for React component props.
JavaScript
6
star
21

material-ui-share

Material design web share component
JavaScript
5
star
22

materialdesign-webfont-material-ui

FontIcon components for Material Design Icons font icons.
JavaScript
4
star
23

mctext-react

A React component to display Minecraft-formatted text.
JavaScript
4
star
24

mui-styleguidist-wrapper

A wrapper of react-styleguidist for Material-UI components.
JavaScript
3
star
25

soundcloud-searcher

Search soundcloud tracks by name. Filter by genre
JavaScript
2
star
26

module-loader

High Cohesion, Loose Coupling with ease
JavaScript
2
star
27

McTextBlock

A WPF component for rendering Minecraft formatted text.
C#
1
star