Slightly awkward to wrap process in a form tag

[itsdouges]

Hey! Started using your library for a side project. One case I wanted was to be able to wrap it in a form element (maybe it would be good to do it out of the box?).

I had to do this atm:

          <FormProcessor renderer={materialUiRenderer}>
            <Form onSubmit={console.log}>
              <FormFragment defaultFields={form} />
              <Button type="submit">submit</Button>
            </Form>
          </FormProcessor>

where <Form> is:

export const Form = (props) => (
  <FormContext.Consumer>
    {(form: any) => (
      <FormRoot
        {...props}
        onSubmit={e => {
          e.preventDefault();
          if (form.isValid) {
            props.onSubmit(form.value);
          }
        }}
      />
    )}
  </FormContext.Consumer>
);

Also with the docs you have atm I kept having to jump around to the src/packages/demo to see the implemented code - I think it'd be great if your examples also had some example usage next to them as well, not just the schema definition :)

[draperd]

Thanks for the feedback - that's much appreciated. The issue with me having failed to include a form element in the the DOM for the component was raised in #25 - I'll fix that asap. I realise that I've not provided a specific button for the Material UI renderer as I have for the Atlaskit renderer (here) - that's also something I should do - presumably in your code snippet above the Button is a Material UI button?

I completely agree about the documentation - I know that I need to do a better job with that as well to provide examples of the code side of things too. I'll do my best to make some improvements as soon as I can!

[mukundanma]

Thanks for creating a fantastic library. It satisfies all the requirements for my project (React + Material UI) except for the following:

• FormButton
• DatePicker.

I didn't completely get the above solution for Form Button.
Any pointers on implementing would help.

[draperd]

Thanks for the feedback @mukundanma - one of the main purposes of the library is to separate the form rendering from the form logic. I only provided the Material renderer as another example of how how you could render the same form with multiple form libraries.

I don't plan to keep the example renderers up-to-date with the latest changes in the libraries but it should be relatively each to either extend or create a renderer for any component library that maps a type (e.g. date) to a specific component.