react-input-error-tip

An input field with error tip for react

Usage no npm install needed!

<script type="module">
  import reactInputErrorTip from 'https://cdn.skypack.dev/react-input-error-tip';
</script>

README

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  npm

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.