@hiogopariz/react-object-forms

react-object-forms

Install

npm install --save @hiogopariz/react-object-forms

or

yarn add @hiogopariz/react-object-forms

Usage

Create your form inputs once, use it everywhere

import React from 'react';

import { createFormTemplate } from 'react-object-forms';

function CustomInput({value, onChange, ...props}) {
 return <input value={value} onChange={(e) => onChange(e.target.value)} {...props} />;
}

function CustomFormContainer({ onSubmit, fields }) {
 return (
  <form onSubmit={onSubmit}>
   {fields}
   <input type='submit' />
  </form>
 );
}

const myFormTemplate = createFormTemplate({
 components: [['input', CustomInput]],
 wrapper: CustomFormContainer,
});

const MyCustomForm = myFormTemplate.generate({
 name: 'input',
 email: {
  component: 'input',
  props: {
   type: 'email',
  },
 },
});

function App() {
 const onSubmit = (data) => console.log(data);
 const defaultValues = {
  name: '',
  email: '',
 };

 return <MyCustomForm onSubmit={onSubmit} defaultValues={defaultValues} />;
}

License

MIT © HiogoPariz