react-forms-factory :factory:

[WIP] Extendable re-usable forms for React [WIP]

Concept

The idea came about while working on Tabler React, I would like to provide a set of ready to use form components in that library that can be easily amended for each users need and so React Forms Factory was born, a library to help build re-usable, extendable forms that work with form libraries like Formik and UI component libraries like Tabler React.

Form fields can be composed by objects via props, components via children or a combination of both. Forms have a default set of fields that are easily modified or replaced.

Install

yarn add react-forms-factory

Usage

IMPORTANT: RFF is very much a WIP, the below usage guide and examples are not yet fully implemented.

Create a form using props

<FormFactory
  fields={[
    <Form.Input
      name="username"
      label="Username"
      placeholder="Username"
    />,
    {
      fieldType: "email",
      props: {
        label: "Email: ",
        name: "email",
        placeholder: "Email",
      },
    },
    {
      fieldType: "password",
      props: {
        label: "Password: ",
        name: "password",
        placeholder: "Password",
      },
    },
  ]}
/>

Event Props

RFF makes life a little bit easier by taking onChange and onBlur props from the FormFactory component and adding them to each of your fields.

As with everything in RFF you can override these values for each individual field if you need.

Fields

There are two props used for definining the fields in your form, fields and adjustFields.

Both are configured in exactly the same way, however, adjustedFields can be used to make modifications to the underlying fields

Fields can be defined in 3 different ways:

• really simple strings that use your base components and auto props to create your field
• objects that can either use autoProps or your own values
• React Components

Examples of all 3:

[
  'email',
  {
    autoProps: 'email',
    props: {
      placeholder: 'My custom placeholder'
    }
  },
  {
    fieldType: "email",
    props: {
      label: "Email: ",
      name: "email",
      placeholder: "Email",
    }
  },
  AnImportedComponent,
  <AnotherComponent label='Something' />
]

If you do not use either of the autoProps options, the first 2 in the above example, your definitions or components must contain a name prop to identify them.

Children

You can optionally use children to define your fields. If you use the fields prop to define your underlying fields, any children will be used to define adjustedFields, otherwise they act as your `fields

Base Components

You can define a set of components that are used by RFF when build forms. These components are used when you define a field through an object.

There is a default set of components that map to HTML elements. You can add your own components to the object. Base components can be overidden at field definition time.

Auto Props

Using the autoProps prop helps you to define a field in 1 line.

RFF will use the value of autoProps to define a component and add name, label, and placeholder props to it.

For example if autoProps is 'Email':

| prop | value |

| name | 'email' | | label | 'Email: ' | | placeholder | 'Email' | | fieldType* | 'email' |

Or 'First Name':

| prop | value |

| name | 'firstName' | | label | 'First Name: ' | | placeholder | 'First Name' | | fieldType* | 'firstName' |

*fieldType will attempt to find a matching component in your base components, if there is none you must include you own fieldType prop.

Examples

<Formik
  initialValues={{ email: '', password: '' }}
  onSubmit={(
      values
    ) => {
      console.log(values);
    };
  }
  render={formikRenderPropFactory([
    'email', 'password'
  ])()}
/>

import React, { Component } from 'react'

import { FormFactory, formFactory } from 'react-forms-factory'

import { Form } from 'tabler-react';

const components = {
  form: "form",
  text: Form.Text,
  password: "input",
  email: <input type='email' />,
  checkbox: "checkbox",
};

const LoginForm = formFactory(components)([
  {
    fieldType: "text",
    label: "Name: ",
    name: "name",
    placeholder: "Name",
  },
  {
    fieldType: "email",
    label: "Email: ",
    name: "email",
    placeholder: "Email",
  },
  <Form.Input type='password' label='Password: ' placeholder='password' name='password' />,
])

class Example extends Component {
  render () {
    return (
      <LoginForm adjustedFields={[ {}, { label: 'Enter your email'}, {} ]} />
    )
  }
}

License

MIT © jonthomp