dynamic-list

Dynamic form list based on formik and material-ui

Install

npm install @ivanbeldad/dynamic-list

Usage

import React, { Component } from 'react'
import { Formik } from 'formik';
import { Button, TextField } from "@material-ui/core";
import { EmailOutlined } from '@material-ui/icons'

import { DynamicList } from '@ivanbeldad/dynamic-list';

export default class App extends Component {
  render () {
    return (
      <div>
        <Formik
          initialValues={{ emails: [] }}
          onSubmit={(values) => console.log(values)}
          render={props => (
            <form>
              <DynamicList
                name='emails'
                initialValue={{ email: '', tag: '' }}
                sectionIcon={<EmailOutlined />}
                render={(fields) => {
                  const [field1, field2] = fields;
                  return (
                    <div>
                      <TextField {...field1} placeholder='Email' />
                      <TextField {...field2} placeholder='Tag' />
                    </div>
                  )
                }}
              />
              <Button variant='outlined' onClick={props.handleSubmit}>Submit</Button>
            </form>
          )}
        />
      </div>
    )
  }
}

License

MIT © ivanbeldad