0.0.0 • Published 3 years ago

form-handler-react v0.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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

PropDescriptionDefault
onSubmitFunction to handle form data
validationsA set of functions to validate inputs by namenone
formStyleexternal form style{}
styleErrorParagraphexternal style for error display{}
styleErrorDivexternal style for error container{}
classNameErrorDivclassName for error containernone
classNameErrorParagraphclassName for error displaynone
classNameFormclassName for formnone

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