@settlin/formik-mui NPM

@settlin/formik-mui

v5.x.x - MUI v5
v4.x.x - MUI v4

Heavily Inspired from https://github.com/stackworx/formik-material-ui https://github.com/daixianceng/formik-material-fields

A set of material style fields for formik using material-ui

This library provides the following components:

Input - a generic input field with all types eg: text, radio, checkbox, buttons (button group), switch, select, hidden, date.... Some extra fields like filter are also available.
Formik-ed Components from MUI eg Select TextField RadioGroup etc...

Documentation

TODO
Please see the code for now
All components in formik directory are the actual formik Fields which are used by the generic Input
All components in forms directory are wrappers over mui fields, which convert the formik and other props to relevant props using a function called formikToMuiProps

Installation

Using npm:

$ npm install --save @settlin/formik-mui

Usage

import React, { Component } from 'react';
import { Formik, Form } from 'formik';
import { Input } from '@settlin/formik-mui';

const initialValues = {
  username: '',
};

class MyForm extends Component {
  render() {
    return (
      <Formik
        initialValues={initialValues}
        onSubmit={this.props.onSubmit}
      >
        {({ isValid }) => (
          <Form autoComplete="off">
            <Input
              name="username"
              label="Username"
              margin="normal"
              fullWidth
            />
          </Form>
        )}
      </Formik>
    );
  }
}

Exposed Formik Fields

export {default as Input} from './Input';

export {default as ButtonGroup} from './formik/ButtonGroup';
export {default as Checkbox} from './formik/Checkbox';
export {default as CheckboxGroup} from './formik/CheckboxGroup';
export {default as CurrencyField} from './formik/CurrencyField';
export {default as InputArra} from './formik/InputArray';
export {default as Persist} from './formik/Persist';
export {default as Radio} from './formik/Radio';
export {default as Select} from './formik/Select';
export {default as Switch} from './formik/Switch';
export {default as TextField} from './formik/TextField';

export {default as Button} from './forms/Button';
export {default as formikToMuiProps} from './forms/formikToMuiProps';

export {default as currencify} from './utils/currencify';
export {default as validateDob} from './utils/validate/dob';
export {default as validateEmail} from './utils/validate/email';
export {default as validateMobile} from './utils/validate/mobile';