Form Rendering customisation with renderers

<ApolloForm> allows to you to provide child render props.

If present, it will totally by pass the rendering of <ApolloForm>.

A child inherit from props with ApolloRenderProps type:

export interface ApolloRenderProps {
    // renderers
    header: () => React.ReactNode; // render the form header (title by default)
    form: () => React.ReactNode; // render the inputs
    buttons: () => React.ReactNode; // render save and cancel buttons
    saveButton: () => React.ReactNode; // render save button
    cancelButton: () => React.ReactNode; // render cancel button
    // actions
    cancel: () => void; // trigger a cancel
    save: (args: any) => void; // trigger a save
    // state
    isDirty: boolean;
    isSaved: boolean;
    hasError: boolean;
    data: any;
}

Example of render props usage:

<Form
   /* ... */
>
    {
        form => (
            <div
                style={{
                    backgroundColor: '#FFF',
                    padding: '20px'
                }}>
                <h2>
                    My form!
                </h2>
                <br />
                {form.form()}
                {form.saveButton()}
            </div>
        )
    }
</Form>

As you can see, you get full control over the form rendering. Everything is customisable except the inputs, to customise inputs, see "Theming".