@feizheng/react-ant-input-search

react-ant-input-search

Ant input search box optimize.

installation

npm install -S @feizheng/react-ant-input-search

update

npm update @feizheng/react-ant-input-search

event action

name	description
clear	When value change to empty.
search	When trigger seach action.
change	When value changed.
enter	When press enter.

properties

Name	Type	Required	Default	Description
className	string	false	-	The extended className for component.
onChange	func	false	noop	The change handler.

usage

1. import css

@import "~@feizheng/react-ant-input-search/dist/style.scss";

// customize your styles:
$react-ant-input-search-options: ()

2. import js

import ReactDemokit from '@feizheng/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactAntInputSearch from '@feizheng/react-ant-input-search';
import './assets/style.scss';

class App extends React.Component {

  handleChange = (inEvent) => {
    const { action, value } = inEvent.target;
    console.log('value:', action, value);
  };

  render() {
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-ant-input-search">
        <ReactAntInputSearch
          allowClear
          enterButton
          className="bg-gray-800 mb-5 text-white"
          onChange={this.handleChange}
        />
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

• https://afeiship.github.io/react-ant-input-search/

license

Code released under the MIT license.