0.2.5 • Published 2 years ago
@essappstate/canopy-react-inputfield v0.2.5
@essappstate/canopy-react-inputfield
Creates a input field for a form. Granted, may be overkill, but it helps with labels and such. Works with AppStateESS/Canopy.
Install
npm install --save-dev @essappstate/canopy-react-inputfieldExample
import InputField from '@essappstate/canopy-react-inputfield'
setUsername(val) {
this.setState({username: val})
}
render() {
<InputField
name="username"
label="Username"
value={this.state.username}
change={this.setUsername.bind(this)}
required={true}/>
}Properties
| Prop name | Type | Description |
|---|---|---|
| name | string | Name parameter of input |
| label | string | A label that displays before the input |
| type | string | text, password, date, datetime, etc. |
| value | string,number | Value to appear in the field. Should couple to the state |
| change | function | Function called on change |
| blur | function | Function call when input blurred |
| placeholder | string | Default placeholder text shown in the input |
| errorMessage | string | Error message you want to appear under the input field |
| iid | string | Id parameter of input |
| autocomplete | boolean | The autocomplete status. Default true (not shown) |
| required | boolean | Whether input field is required for form. Will warn when blurred |
| disabled | boolean | If true, input will be disabled and unaccessible |
| size | string,number | Size of input (will not affect width due to Bootstrap 100%) |
| maxLength | number | Maximum number of characters allowed in field |
| wrap | function | Function that will receive the input field only. Useful if you want to wrap the input in tag but not the label |
| selectOnClick | boolean | If true, the value in the input will be highlighted for replacement |
| onEmpty | function | Function that should be run if the input is empty and blurred |
| disableRequireCheck | boolean | Disable the blur empty check when flagged as required. Lets you set your own way of handling empty inputs. |