react-amazing-input v1.1.1

react-amazing-input

Installation

    npm install react-amazing-input

or

    yarn add react-amazing-input

Props

###Usage

import * as React from "react";
import {Component} from "react";
import {autobind} from "core-decorators";

import {Input} from "react-amazing-input";


interface AppState {
  value: string;
  inputFocused: boolean;
  inputHidden: boolean;
  enableControlState: boolean;
}

class App extends Component<{}, AppState> {

  constructor(props) {
    super(props);

    this.state = {
      value: "",
      inputFocused: false,
      inputHidden: false,
      enableControlState: true
    };
  }

  @autobind
  private onInput(str: string) {
    this.setState({value: str});
  }

  @autobind
  private onNativeFocusInput() {
    this.setState({inputFocused: true});
    console.log("Native focus");
  }

  @autobind
  private onNativeBlurInput() {
    this.setState({inputFocused: false});
    console.log("Native blur");
  }

  render() {
    
    const {value, enableControlState, inputHidden, inputFocused} = this.state;
    
    return (
      <div className={"App"}>
        <div>
          <h2>Input value:</h2>
          <h3>{value}</h3>
        </div>
        <Input onNativeFocus={this.onNativeFocusInput}
               onNativeBlur={this.onNativeBlurInput}
               onInput={this.onInput}
               focused={enableControlState ? inputFocused : null}
               hidden={inputHidden}
               value={value}/>
        <button onClick={() => this.setState({inputFocused: !inputFocused})}>Change focus</button>
        <button onClick={() => this.setState({inputHidden: !inputHidden})}>Change hidden</button>
        <button onClick={() => this.setState({value: "123"})}>Change value</button>
        <label>
          <input type='checkbox' checked={enableControlState} onClick={() => this.setState({enableControlState: !enableControlState})} />
          Enable control state
        </label>
      </div>
    );
  }

}