antd-search-box

An ant design based search box.

Examples

http://localhost:8002/examples

Online examples: http://Alex1990.github.io/antd-search-box/

Install

npm install antd-search-box

Usage

import 'antd/dist/antd.css';
import 'antd-search-box/assets/index.less';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SearchBox from 'antd-search-box';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      value: undefined,
      keyword: undefined,
    };
  }

  handleChange(value) {
    this.setState({ value });
  }

  handleSearch(value) {
    this.setState({ keyword: value });
  }

  render() {
    const { value, keyword } = this.state;
    return (
      <div style={{ margin: 32, width: 300 }}>
        <div>Current value: {value}</div>
        <div>Press `Enter/Return` to search: {keyword}</div>
        <div>
          <SearchBox
            value={value}
            placeholder="Type the keyword"
            onChange={this.handleChange.bind(this)}
            onSearch={this.handleSearch.bind(this)}
          />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('__react-content'));

API

SearchBox

props:

name	type	default	description
className	String	""	Set the `SearchBox` className.
style	Object	{}	Set the `SearchBox` style prop.
defaultValue	String
value	String
size	String	"default"	There are three valid values: "small", "default" and "large".
disabled	Boolean	false
placeholder	String
onChange	Function		When the value of the search input is modified, this function will be called.
onSearch	Function		When press the Enter key, this function will be called.

The other props will be as the Ant Design Input's props.

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

antd-search-box is released under the MIT license.