form-handler-react
TypeScript icon, indicating that this package has built-in type declarations

0.0.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i form-handler-react

Weekly Downloads

0

Version

0.0.0

License

MIT

Unpacked Size

27.7 kB

Total Files

23

Last publish

Collaborators

  • joaovitor32