An HTML input element with build-in errorTips
https://phuhwei.github.io/react-input-error-tip/
react
styled-components
Through
npm install react-input-error-tip --save
or
yarn add react-input-error-tip
ES6
import InputTip from 'react-input-error-tip';ES5
const InputTip = require('react-input-error-tip');Component
export default class App extends Component {
constructor(props) {
super(props);
this.ref = {};
this.state = {};
}
render() {
return (
<InputTip
type="password"
name="password"
placeholder="At least 15 digit"
value={this.state.password}
onChange={evt => this.setState({ password: evt.target.value })}
toggleTip={(name, bool) => this.setState({ password_tip: bool })}
refInput={(node) => { this.ref.password = node; }}
errorTips={[{
placement: 'bottom',
name: 'password_tip',
show: this.state.password_tip,
text: 'at least 15 digit password',
validate: value => value.length >= 15,
offset: {
X: -1,
},
}]}
/>
);
}
}| Props | Options | Default | Description |
|---|---|---|---|
| toggleTip | Function | required | the function to toggle the errorTip, should take (tipName, boolean) as input |
| value | String or Number | required | would render a controlled element |
| onChange | Function | required | would render a controlled element |
| refInput | Function | null | act as regular ref property |
| errorTips | Array of Object | null | [ { name: String, show: bool, text: String, validate: Function, offset: Object, placement: String } ] |
| validate (inside errorTips) |
Function | null | take the event.target.value as input, triggerd when input field loses focus |
| offset (inside errorTips) |
Object | null | {X: integer, Y: integer}, in px unit |
| placement (inside errorTip) |
one of: 'top', 'right', 'bottom', 'left' | 'top' | the position of error tip |
| showAllTips | Boolean | false | if false, only show the first errorTip; otherwise show all invalid errors |
Accepts all props which can be given to a input element.