react-textinput-field

React package to render input field with floating label.

Usage no npm install needed!

<script type="module">
  import reactTextinputField from 'https://cdn.skypack.dev/react-textinput-field';
</script>

README

react-textinput-field

React package to render input field with floating label.

NPM JavaScript Style Guide

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,}quot;,
    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

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