material-ui-repeatable

material-ui-repeatable

Repeat any component as many times as you like on the page.

Single TextField

Multiple TextField's

Installation

yarn add material-ui-repeatable

Or with npm

npm i --save material-ui-repeatable

Usage example

import React, { Component } from 'react';
import Repeatable from 'material-ui-repeatable';
 
class MyComponent extends Component {
    contructor() {
        super();
        this.state = {
            copies: 1
        };
    }
 
    repeat = (index) => (
        <div key={`replicant-${index}`}>hello, I am replicant {index}</div>
    )
 
    onAdd = (index) => {
        console.log('added replicant', index);
        this.setState({ copies: this.state.copies + 1 });
    }
 
    onRemove = (index) => {
        console.log('removed replicant', index);
        this.setState({ copies: this.state.copies - 1 });
    }
 
    render() {
        return (
            <Repeatable
              initialCopies={this.state.copies}
              childrenRenderer={this.repeat}
              onAdd={this.onAdd}
              onRemove={this.onRemove}
              />
        );
    }
}

Properties

For snackbar props please see material-ui docs.

Name	Type	Default	Description
initialCopies	number	1	Number of the replicants to be generated at the render time.
requiredCopies	number	1	Number of the replicants that should be persist(remove control will hide when this value is reached).
childrenRenderer	function	(index) => []	A function that returns a new replicant.
onAdd	function	(index) => undefined	Function that will be invoked after some replicant added.
onRemove	function	(index) => undefined	Function that will be invoked after some replicant removed.
style	object	{}	Style of the component container.

License

MIT