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
class App extends Component {
render() {
return <GsdForm data={data} />
}
}
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
class App extends Component {
handleSubmit (value, setters) {
// send to a REST API ...
console.log('onSubmit', value)
setters.setSubmitting(false)
}
handleChanges (name, value) {
// Called when each field changes
console.log('handleChanges', name, value)
}
buttonProps (form) {
// Called when each field changes
console.log('buttonProps', form)
}
render() {
return (
<GsdForm
data={data}
handleSubmit={this.handleSubmit}
handleChanges={(name, value) => this.handleChanges(name, value)}
buttonProps={form => this.buttonProps(form)}
/>
)
}
}
export default App
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