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

• Add accesibility tags
• Support regex in validation message
• 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