office-ui-redux-form-renderers

office-ui-redux-form-renderers is a collection of functions to pass into the the component prop of a Redux Form Field component. The functions take in the props passed into the Field Component as well as the Field's WrappedFieldProps and returns the Fabric UI component. There is also a validators file that contains a collection of functions that are passed into the validate props of the Redux Form Field component for validation.

Current components

• TextField
• Dropdown(with available multiSelect option)
• Checkbox

Example Renderer

import {TextField, ITextFieldProps} from 'office-ui-fabric-react';
import React from 'react';
import {WrappedFieldProps} from 'redux-form';

type ReduxTextFieldProps = ITextFieldProps & WrappedFieldProps;

export default function ReduxTextField (props: ReduxTextFieldProps): JSX.Element {
  const {input, meta, ...other} = props;
  return (
    <TextField
      key={input.name}
      onChange={input.onChange}
      value={input.value}
      errorMessage={meta.error}
      {...other}
    />
  );
}

Our renderer function will recieve props from the Field component. The props provided by redux-form are divided into input and meta objects. The props under the input key are what connects your input component to Redux and are meant to be destructured into your component. The props under the meta key are metadata about the state of this field that redux-form is tracking for you.

Any custom props passed to Field will be merged into the props object on the same level as the input and meta objects. These are the props that Fabric UI expects, eg, ITextFieldProps.

Creating a Field and using a Renderer

Example of creating a form Field in your UI code.

import {Field} from 'redux-form/immutable';
import {numberValidator, TextField} from 'office-ui-redux-form-renderers';

...

<Field
  name='year'
  ariaLabel='year'
  label='Year'
  required
  validate={[numberValidator]}
  component={TextField}
/>

Notice that we are importing Field from 'redux-form/immutable' and not 'redux-form'. The validate prop is an array of fuctions that validate your field at field level. The component prop is the renderer that we created. Any props that you want to use for Fabric can be added as a prop here and will be passed down to our wrapped component.

Creating a New Renderer

To create a new renderer for another Fabric UI component, add a new tsx file in this directory and follow the same pattern as the current renderers. Then import and export the renderer in index.ts.

Using and Creating Validators.

Validators are functions that return an error message in the meta prop. Passing in an array of these functions will validate the component at the field level. It is also possible to do async blur and change validation. Examples of validators:

export const numberValidator = (value: string): string | undefined =>
  value && isNaN(Number(value))
    ? 'Must be a number'
    : undefined;

export const emailValidator = (value: string): string | undefined =>
  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
    ? 'Invalid email address'
    : undefined;