Efficient way of using custom components

Current way of passing props to custom form components is similar to this one:

<Input
  name="username"
  label="Username or E-mail"
  errors={errors.username}
  touched={touched.username}
  onChange={handleChange}
  onBlur={handleBlur}
/>
<Input
  type="password"
  name="password"
  label="Password"
  errors={errors.password}
  touched={touched.password}
  onChange={handleChange}
  onBlur={handleBlur}
/>

This 2 inputs already need like 15 lines in editor. As you can see, we pass the same props to both of them -errors, touched, handleChange and handleBlur.

Is it somehow possible to automatically pass this props so we can reduce the code to something like this:

<Input name="username" label="Username or E-mail" />
<Input type="password" name="password" label="Password" />

Same 2 inputs, but only 2 lines in editor. Maybe it’s just me, but it’s much easier to have small compact forms.

One of possible solutions I can think of - a Field component, that gets all passed form props (via context?) and Input is a wrapper over this component.

Maybe there are other ideas/ways of solving this?

[jaredpalmer]

@VladShcherbin Plan is to merge it to master next week.

[jaredpalmer]

@VladShcherbin Correct see the <Field/> component.