1.0.4 • Published 1 year ago

@jswork/react-ant-input-search v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

react-ant-input-search

Ant input search box optimize.

version license size download

installation

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

properties

NameTypeRequiredDefaultDescription
classNamestringfalse-The extended className for component.
onSearchfuncfalsenoopThe search handler.

usage

  1. import css

    @import "~@jswork/react-ant-input-search/dist/style.css";
    
    // or use sass
    @import "~@jswork/react-ant-input-search/dist/style.scss";
    
    // customize your styles:
    $react-ant-input-search-options: ()
  2. import js

    import ReactDemokit from '@jswork/react-demokit';
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import ReactAntInputSearch from '@jswork/react-ant-input-search';
    import './assets/style.scss';
    
    class App extends React.Component {
      handleChange = (inEvent) => {
        const { value } = inEvent.target;
        console.log('change:', value);
      };
    
      handleSearch = (inEvent) => {
        const { value } = inEvent.target;
        console.log('search.', value);
      };
    
      render() {
        return (
          <ReactDemokit
            className="p-3 app-container"
            url="https://github.com/afeiship/react-ant-input-search">
            <ReactAntInputSearch
              placeholder="input search text"
              allowClear
              enterButton
              className="bg-gray-800 mb-5 text-white"
              onChange={this.handleChange}
              onSearch={this.handleSearch}
            />
          </ReactDemokit>
        );
      }
    }
    
    // ReactDOM.render(<App />, document.getElementById('app'));
    ReactDOM.createRoot(document.getElementById('app')).render(<App />);

documentation

license

Code released under the MIT license.