Redux-Form Compatibility

[jimmyhmiller]

One goal of this library is to have a drop-in redux-form compatible component. Most of the time that is what we are using. I did mention in the Readme that it should work without redux-form and I think that is a good goal. My question is about how do we expose that. Is the component connected to redux-form by default or not? Do we wrap it in a component? Pass a prop?

[jimmyhmiller]

I think by default not having it connected and passing a prop explicitly to connect it would make it more clear and less magical.

[trabianmatt]

The biggest use I have for projects that combine redux-form and input components such as those in Bootstrap is to map the redux-form field props to the component props. For example, the onChange function needed by the component is passed to the redux-form field as input.onChange.

I've created a withReduxForm HOC in the past (I can track it down if needed). We may have other options for handling it, though.

[jimmyhmiller]

I think we can definitely expose some of those lower level elements. But the goal would be to just have ready-made components that have done that mapping for you so you never have to think about that. If you have some use-case that doesn't fit the library directly though, hopefully we will have a helper function for you.

[trabianmatt]

What I'd like to be able to do is something similar to:

import {
  FormControl
} from 'hylomorph';

import { Field } from 'redux-form';

const MyForm = () => (
  <form>
    <Field
      name="myField"
      type="text"
      component={FormControl}
    />
  </form>
);

[jimmyhmiller]

Ever so slightly different, but this is what I'd like to be able to do. (I changed FormControl to Input just because I don't like the name.)

import {
  Input
} from 'hylomorph';

const MyForm = () => (
  <form>
    <Input
      name="myField"
      type="text"
      reduxFormField
    />
  </form>
);

In fact, how I'm imagining it working you could also do.

import {
  Input
} from 'hylomorph';

import { Field } from 'redux-form';

const MyForm = () => (
  <form>
    <Field
      name="myField"
      type="text"
      component={Input}
    />
  </form>
);

But you wouldn't need to. So, I don't think we are too far off on what we are looking for.

[trabianmatt]

I'm ok with the explicitness of the latter one, but am open to seeing how the first feels.