form-handler-react

Overview

A simple lightweight form handler made in React for simple forms wich can be integrated with your css styles and fields validations.

Installation

npm i form-handler-react

Properties

| Prop | Description | Default | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | onSubmit | Function to handle form data
| validations | A set of functions to validate inputs by name | none | formStyle | external form style | {} | styleErrorParagraph | external style for error display | {} | styleErrorDiv | external style for error container | {} | classNameErrorDiv | className for error container | none | classNameErrorParagraph | className for error display | none | classNameForm | className for form | none

License

MIT

How to use

import React from 'react'

import Form from 'form-handler-react'

const View: React.FC = () => {
  return (
    <>
      <Form
        onSubmit={data => {
          console.log(data)
        }}
        styleErrorParagraph={{ color: 'red', fontWeight: 'bold' }}
        validations={{
          cpf: text => {
            const regex =
              /^([0-9]{3}\.?[0-9]{3}\.?[0-9]{3}\-?[0-9]{2}|[0-9]{2}\.?[0-9]{3}\.?[0-9]{3}\/?[0-9]{4}\-?[0-9]{2})$/
            return regex.test(String(text))
          },
        }}
      >
        <div>
          <input name="name1" type="text" value="value" />
          <div>
            <input name="cpf" type="text" value="value" />
          </div>
        </div>
        <button
          style={{
            backgroundColor: 'blue',
            color: 'white',
            borderRadius: '16px',
            border: 'none',
            padding: '8px 16px',
          }}
          type="submit"
        >
          Salvar
        </button>
      </Form>
    </>
  )
}

export default View