React-final-form-fields NPM

React Final Form Fields

🥂 Version 2! Now supporting react-native-web and react-native! Works sort of the same all around!

This library creates some simple drop-in form field for react-final-form. They include in each field container a label and error.

The TextInput component also allows the following types:

text
password
newPassword
date
pin
phone

FormBuilder

The form builder component allows you to build complete forms easily.

<FormBuilder
  onSubmit={console.log}
  validator={values => ({ banned: `${values.email} is banned` })}
  Email={{
    render: TextField,
    options: {
      placeholder: 'This is a demo only, these will look like fields one day.',
      input: { style: { backgroundColor: 'red' } },
    },
  }}
  Button={{
    component: Button,
    options: {
      secondary: true,
      large: true,
      bold: true,
      render: () => (
        <View>
          <Text>LOG IN</Text>
        </View>
      ),
    },
  }}
  styles={{
    outerContainer: `
      background-color: white;
    `,
    fieldContainer: `
      background-color: tranparent;
    `,
    innerContainer: `
      height: 300;
    `,
  }}
/>

This will return an error saying the email is banned.

Styling

⚠️ To style components, pass something like this into Field as the containers prop.

const containers = {
  OuterContainer: styled.View`
    border-style: dotted;
    border-color: green;
    border-width: 3;
    width: 100%;
    padding-vertical: 15;
    padding-horizontal: 15;
  `,
  LabelContainer: styled.View`
    position: absolute;
    margin-left: 16;
    max-width: 85;
    top: 10;
    z-index: 2;
    background-color: ${({ meta: { error } }) => (error ? 'white' : 'white')};
    justify-content: center;
    align-items: center;
    padding-horizontal: 5;
  `,
  Label: styled.Text`
    color: red;
    font-size: 12;
    line-height: 15;
  `,
  FieldContainer: styled.View`
    margin-top: 10;
    width: 100%;
    flex-grow: 1;
    flex-direction: row;
  `,
  FieldElement: styled.TextInput`
    margin-top: 10;
    width: 100%;
    background-color: gray;
  `,
  ErrorContainer: styled.View`
    margin-left: 10;
    margin-top: 10;
  `,
  ErrorText: styled.Text`
    color: pink;
  `,
}

Drop-in field components for react-final-form on all platforms (ios, Android, web).