react-textinput-field

React package to render input field with floating label.

Install

npm install --save react-textinput-field

Usage

import React, { Component } from 'react';
import TextInput from 'react-textinput-field';


let namevalidations = [
  {
    rule: "-",
    message: "the field should not be empty"
  },
  {
    rule: "^.{6,}$",
    message: "Length sould be more than 6"
  }
]

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { }
  }

  updateInputValue = (id, value) => {
    this.setState({
      [id]: value
    })
  }

  render() {
    return (
      <div>
        <TextInput
          attr={{
            "name": "name",
            "type": "text",
            "value": this.state["name"] || "",
            "autoComplete": "off",
            "required": true
          }}
          updateInputValue={this.updateInputValue}
          label={"Name"}
          message={namevalidations}
        />
      </div>
    )
  }
}

Screenshot

TODO

• [x] Add accesibility tags
• [x] Support regex in validation message
• [x] Display error message on Blur
• [ ] Update example with grid and mow view
• [ ] Update documenation of the component
• [ ] Add textarea element
• [ ] Add Rule utils with predefined Regex and min/max length function
  • [ ] Email
  • [ ] IsAlphaNumeric
  • [ ] minLength()
  • [ ] maxLength()
  • [ ] Number
  • [ ] Url

License

MIT © binodswain