react-input-error-tip

react-input-error-tip

An HTML input element with build-in errorTips

Demo

https://phuhwei.github.io/react-input-error-tip/

Requried Packages in Your Dependencies

    react
    styled-components

Install  

Through
npm install react-input-error-tip --save
or
yarn add react-input-error-tip

Usage

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

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.