send4-input-generator v0.2.2

Send4 input generator

Create input field with validation . DOC soon!

Install

npm install --save send4-input-generator

Usage

import React, { useState } from 'react'

import Input from 'send4-input-generator'

export default function Example(props) {
  const [number, setNumber] = useState(null);
  const [email, setEmail] = useState(null);
  
  return (
    // Example using a validation func
    <Input
      id="number"
      type="text"
      label="Leave a number"
      lang="ptBR" // Translate some default input errors.
      value={number}
      validation={(n) => !isNaN(n)}
      errorMsg="Não é um número"
      required={true}
      onChange={(number) => setNumber(number)}
    />

    // Example using pattern
    <Input
      id="email"
      label="Email"
      placeholder="example@mail.com"
      value={email}
      pattern="^([a-z0-9_\-.+])+@([a-z0-9_\-.])+\.([a-z]{2,})$"
      errorMsg="Email invalid"
      required={true}
      onChange={(email) => setEmail(email)}
    />
  );
}

Output

<div class="input-default">
  <label>Something</label>
  <input id="something-id" name="something-name" type="text" value="" required />
  <p>Show error message (if you have)</p>
</div>

License

MIT © Send4