react-amazing-input
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-amazing-input

Weekly Downloads

3

Version

1.1.1

License

MIT

Unpacked Size

462 kB

Total Files

28

Last publish

Collaborators

  • adaptmen