GsdForm
Formik-based React library to create forms from plain JS objects (or JSON!)
Demo
Installing
yarn add gsd-form
Usage
import GsdForm from 'gsd-form'import 'gsd-form/style.css' // Optional { return <GsdForm = /> }
Form data example
data = form: submitButton: text: 'Send' // Optional. Default : Submit component: CustomComponent fields: ... // Inline form // For forms sections you can use an array with nested fields // P.S.: These fields will be flattened on submit fields: name: 'String' fields: ... // Equal inline form recaptcha: size: 'invisible' // one of compact, normal, invisible sitekey: 'SITEKEY_CODE' showFormState: Boolean // Optional honeypot: Boolean // Optional
Field props
Property | Type | Description |
---|---|---|
label | String |
Label text |
name | String |
Field (HTML input) name |
component | String |
Options - input , textarea , select |
fieldClass | String |
- |
disabled | String |
disabled |
value | String |
Initial (default) value |
format | String |
Options - numeric , phone , date |
validate | Array<String> |
[Yup validator, Optional custom error message] ex.: validate: [ 'string', ['email', 'Invalid email format'], 'required', ] More |
Field Select | - | - |
options | Array<Object> |
Options for select inputs - [{ value: 'One', label: 'One' }] |
placeholder | String |
select placeholder text' |
noOptionsMessage | String |
Fallback text for empty select options |
You can also pass any other ReactSelect
prop to select
fields, such as menuIsOpen
.
Method props
{ // send to a REST API ... console setters } { // Called when each field changes console } { // Called when each field changes console } { return <GsdForm = = = = /> }
See that the handleSubmit
function has both parameters passed by Formik:
values and a series of setters (errors, values, submitting, ...). You could
use those to use backend validation or manage the loading/submitting state,
for example.
You can use the handleChanges
prop to, for example, change the available
options for interdependent select
inputs, such as country/state/city.
Another useful GsdForm
prop is values
, which can be used to pass dynamic
values to Formik and make whatever desired inputs fully controlled by your
parent component.
Dependencies
Contributing and developing
The projectwas created using create-react-library
, so it should have its]
basic structure updated soon. Right now, all the lib content should reside
inside src
, everything else can be used when developing or as examples.
You can start the dev server running:
yarn start
A production version can be generated using:
yarn build