Issue 175: pass any additional props to custom component

[Th0rN13]

This PR for resolve issue #175

Now u can add any additional props to your custom component. I use custom Select, so i need to pass label, options and anyAdditionalProp.

How to use

RenderForm.tsx

<Field<string>
  name="stack"
  component={SelectAdapter}
  label="Tools"
  options={optionsArrayVariable}
  anyAdditionalProp={anyAdditionalProp}
/>

FormAdapters.tsx (contain adapters for custom components)

interface SelectAdapterProps extends HTMLElement {
  label?: string;
  options: Option[];
  anyAdditionalProp: any;
}

export const SelectAdapter = (props: FieldRenderProps<string, SelectAdapterProps>) => {
  const {
    input,
    meta,
    ...rest
  } = props;
  const {
    options,
    label,
    anyAdditionalProp,
  } = input;
  return (
    <Select
      options={options}
      label={label || ''}
      anyAdditionalProp={anyAdditionalProp}
      {...input}
      {...rest}
    />
  );
};

[codecov]

Codecov Report

Merging #565 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master   #565   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          16     16           
  Lines         231    231           
  Branches       57     57           
=====================================
  Hits          231    231

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2b2f6af...c0fb264. Read the comment docs.

[po35]

Thanks for this PR but tbh, we need really some more docs around this (<Field<string>...., FieldRenderProps<string, SelectAdapterProps>, ...extends HTMLElement) Even when I follow your example TS sends errors in my code. Just comparing formik and rff and the type system there (IDK if better or worse) feels somehow more accessible. There I just gave my custom field a type paired with an interface for the props and all fine. Sorry that I don't have more time to put every error TS gave me. But as said said we should start documenting why @Th0rN13 went the way above in the first place. Thx CCing @erikras

[Yankovsky]

@erikras @Th0rN13 same fix is needed for react-final-form-arrays package.

[Yankovsky]

@Th0rN13 @erikras I still have the same issue https://codesandbox.io/s/strongly-typed-form-values-with-react-final-form-fvkpc
As I understand [key: string]: any; should be added to FieldRenderProps, not to FieldInputProps. In example above additional props are inside rest param.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[erikras]

Published in v6.3.1.