react-amazing-input

Installation

    npm install react-amazing-input

or

    yarn add react-amazing-input

Props

| Name | Type | Description | Default | | --------- | -------- | ------------------------------------- | ------- | | value? | string | value of input | null | | focused? | boolean | set focus state | null | | hidden? | boolean | set hidden state | null | | hiddenStyle? | CSSProperties | custom style for hidden state | null | | style? | CSSProperties | custom style for default | null | | className? | string | className for input | null | | onNativeFocus? | () => void | handle for onFocus | null | | onNativeBlur? | () => void | handle for onBlur | null | | onInput? | (inputValue: string) => void | handle onInput | null | | onChange? | (evt: any) => void | handle onChange | () => {} | | onTouchStart? | (evt: any) => void | handle onTouchStart | null | | onTouchEnd? | (evt: any) => void | handle onTouchEnd | null | | onTouchMove? | (evt: any) => void | handle onTouchMove | null | | onTouchCancel? | (evt: any) => void | handle onTouchCancel | null | | onMouseDown? | (evt: any) => void | handle onMouseDown | null | | onMouseUp? | (evt: any) => void | handle onMouseUp | null | | onMouseMove? | (evt: any) => void | handle onMouseMove | null | | onKeyDown? | (evt: any) => void | handle onKeyDown | null | | onKeyUp? | (evt: any) => void | handle onKeyUp | null | | onKeyPress? | (evt: any) => void | handle onKeyPress | null |

###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>
    );
  }

}