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