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.