form-handler-react
v0.0.0
Published
## Overview
Downloads
4
Readme
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
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