All Projects → TeamWertarbyte → Material Ui Search Bar

TeamWertarbyte / Material Ui Search Bar

Licence: mit
Material design search bar

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Material Ui Search Bar

Jsearch
jSearch(聚搜) 是一款专注内容的chrome搜索扩展,一次搜索聚合多平台内容。
Stars: ✭ 193 (-10.23%)
Mutual labels:  search
Cljs React Material Ui
Clojurescript library for using material-ui.com
Stars: ✭ 204 (-5.12%)
Mutual labels:  material-ui
Algoliasearch Netlify
Official Algolia Plugin for Netlify. Index your website to Algolia when deploying your project to Netlify with the Algolia Crawler
Stars: ✭ 208 (-3.26%)
Mutual labels:  search
Vue Cool Select
Select with autocomplete, slots, bootstrap and material design themes.
Stars: ✭ 195 (-9.3%)
Mutual labels:  search
Tubular React
Material UI table with local or remote data-source. Featuring filtering, sorting, free-text search, export to CSV locally, and aggregations.
Stars: ✭ 202 (-6.05%)
Mutual labels:  material-ui
Book Elastic Search In Action
Elastic 搜索开发实战
Stars: ✭ 205 (-4.65%)
Mutual labels:  search
Lolcate Rs
Lolcate -- A comically fast way of indexing and querying your filesystem. Replaces locate / mlocate / updatedb. Written in Rust.
Stars: ✭ 191 (-11.16%)
Mutual labels:  search
Scout
RESTful search server written in Python, powered by SQLite.
Stars: ✭ 213 (-0.93%)
Mutual labels:  search
Material Singleinputform
A single EditText instead of a classical form. Library that implements flavienlaurent's singleinputform
Stars: ✭ 202 (-6.05%)
Mutual labels:  material-ui
Shsearchbar
The search bar that doesn't suck.
Stars: ✭ 206 (-4.19%)
Mutual labels:  search
Vectorai
Vector AI — A platform for building vector based applications. Encode, query and analyse data using vectors.
Stars: ✭ 195 (-9.3%)
Mutual labels:  search
Saas
Build your own SaaS business with SaaS boilerplate. Productive stack: React, Material-UI, Next, MobX, WebSockets, Express, Node, Mongoose, MongoDB. Written with TypeScript.
Stars: ✭ 2,720 (+1165.12%)
Mutual labels:  material-ui
Minimalist
A Material Color Scheme Darker for Vim.
Stars: ✭ 205 (-4.65%)
Mutual labels:  material-ui
Textrank
🌀 ⚡️ 🌍 TextRank (automatic text summarization) for PHP8
Stars: ✭ 193 (-10.23%)
Mutual labels:  search
Hubuntu Ui
Material Admin Dashboard Starter UI ( Ubuntu style ) - https://720kb.github.io/hubuntu-ui/
Stars: ✭ 207 (-3.72%)
Mutual labels:  material-ui
Qp Gallery Releases
QuickPic Gallery Mod
Stars: ✭ 187 (-13.02%)
Mutual labels:  material-ui
Pytorch Beam Search Decoding
PyTorch implementation of beam search decoding for seq2seq models
Stars: ✭ 204 (-5.12%)
Mutual labels:  search
Tldrstory
AI-powered understanding of headlines and story text
Stars: ✭ 214 (-0.47%)
Mutual labels:  search
Tntsearch
A fully featured full text search engine written in PHP
Stars: ✭ 2,693 (+1152.56%)
Mutual labels:  search
Android Switchicon
Google launcher-style implementation of switch (enable/disable) icon
Stars: ✭ 2,337 (+986.98%)
Mutual labels:  material-ui

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 [email protected]

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].