Shopify-polaris components wrappers for react-final-form

README.md

Below are wrappers for react-final-form and shopify-polaris components which I had to write for my work.

The are simple enough but would save someone at-least a little time. And if i build most componets wrappers, i may put them in an npm package as well to have something plug and play for shopify-polaris and react-final-form integration.

Usage

For using, one gotcha is, that you need to specifiy type.

i.e, for textfield:

<Field component={TextFieldAdapter} label='Text Field' name='text-field-name' type='text'/>

But for checkbox, if you don't specify type, it won't render a checkbox properly.

<Field component={CheckboxAdapter} type="checkbox" name='checkbox-name' label='Yes/No'/>

Same should be valid for other types of input fields.

Hope it helps someone save a few minutes. :)

CheckboxAdapter.jsx

import React from 'react'
import { Checkbox } from '@shopify/polaris'

export default function CheckboxAdapter({ input, meta, ...rest }) {
  return (
    <Checkbox
      {...input}
      {...rest}
      error={meta.touched && meta.error}
      onChange={(value) => {
        input.onChange(value)
      }}
    />
  );
}

TextFieldAdapter.jsx

import React from 'react'
import { TextField } from '@shopify/polaris'

export default function TextFieldAdapter({ input, meta, ...rest }) {
  return (
    <TextField
      {...input}
      {...rest}
      error={meta.touched && meta.error}
      onChange={(value) => {
        input.onChange(value)
      }}
    />
  );
}