formland-material-ui v0.3.2

formland-material-ui

This is a collection of Material UI input components for Formland

Formland Material

Table of Contents

• Get started
• API
  • componentResolver
    • Parameters
  • valueResolver
    • Parameters
• Fields
• components
  • Properties

Get started

Installation

npm i formland formland-material-ui

or

yarn add formland formland-material-ui

Example

import React, { Component } from 'react'
import { componentResolver, valueResolver } from 'formland-material-ui' // Yay!
import Form from 'formland'

class Example extends Component {
  state = {}

  onChange = (newState) => {
    this.setState(newState)
  }

  render() {
    const config = [
      {
        id: 'firstName',
        type: 'material-text', // this is where we defined out custom Material UI field
        resultPath: 'country',
        displayName: 'Shipping Country',
        placeholder: 'Select a country',
        options: [
          {
            value: 'india',
            label: 'India',
          },
          {
            value: 'usa',
            label: 'The United States',
          },
          {
            value: 'china',
            label: 'China',
          }
        ],
      },
    ]

    // Right here we use the custom component and value resolver from this library
    return <Form
      customComponentResolvers={[componentResolver]}
      customValueResolvers={[valueResolver]}
      config={config}
      store={this.state}
      onChange={this.onChange} />
  }
}

API

componentResolver

Component resolver for Formland prop customComponentResolvers

Parameters

• type string The field type given by Formland.

Returns JSX.Element

valueResolver

Value resolver for Formland prop customValueResolvers

Parameters

• config object object given in the fields array. See
• value object given by Formland on each change

Returns Function

Fields

components

Available fields types

Properties

• material-text {component: JSX.Element, value: Function} Field from TextField in Material UI (TextField)