react-amazing-input
v1.1.1
Published
React-component for control state HTMLInputElement
Downloads
11
Readme
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>
);
}
}