Material-ui's Textfield

FormInput.js

/*

<Input
    type={String}
    label={String}
    placeholder={String}
    name={String}
    value={String}
    onFocus={function}
    onChange={function}
    disabled={boolean}
    multiline={boolean}
    fullWidth={boolean}
    InputLabelProps={object}
/>

*/

import React from "react";
import TextField from "material-ui/TextField";
import PropTypes from "prop-types";
import "./FormInput.scss";

const FormInput = ({
	type, label, placeholder, name, disabled, value, multiline, shrink,
	meta: { touched, error, warning }, required, autoFocus,
	InputLabelProps, fullBox, InputProps, fullWidth, onFocus, onChange, input, ...custom
}) => {
	const customProps = {};
	// type
	if (type && typeof type === "string") {
		customProps.type = type;
	}

	// label
	if (label) {
		customProps.label = label;
	}

	// placeholder
	if (placeholder && typeof placeholder === "string") {
		customProps.placeholder = placeholder;
	}

	// name
	if (name && typeof name === "string") {
		customProps.name = name;
	} else {
		// console.warn("Name is missing");
	}

	// disabled
	if (disabled && typeof disabled === "boolean") {
		customProps.disabled = disabled;
	}

	// value
	if (value && typeof value === "string") {
		customProps.value = value;
	}

	// multiline
	if (multiline && typeof multiline === "boolean") {
		customProps.multiline = multiline;
	}

	// autoFocus
	if (autoFocus && typeof autoFocus === "boolean") {
		customProps.autoFocus = autoFocus;
	}

	// InputLabelProps
	if (shrink && typeof shrink === "boolean") {
		customProps.InputLabelProps = { shrink };
	} else if (InputLabelProps && typeof InputLabelProps === "object") {
		customProps.InputLabelProps = InputLabelProps;
	}

	// InputProps
	if (fullBox && typeof fullBox === "boolean") {
		customProps.InputProps = { disableUnderline: fullBox };
	} else if (InputProps && typeof InputProps === "object") {
		customProps.InputProps = InputProps;
	}

	// fullWidth
	if (fullWidth && typeof fullWidth === "boolean") {
		customProps.fullWidth = fullWidth;
	}

	// onFocus
	if (onFocus && typeof onFocus === "function") {
		customProps.onFocus = onFocus;
	}

	// onChange
	if (onChange && typeof onChange === "function") {
		customProps.onChange = onChange;
	}
	//	className
	customProps.className = `${(multiline && typeof multiline === "boolean") ? "Textarea" : ""} 
		${(required && typeof required === "boolean") ? "required-field" : ""}`;

	return (
		<div className="FormInput">
			<TextField {...customProps} {...input} {...custom} />
			<p className="errors">
				{ touched &&
					((error && <span>{error}</span>) ||
					(warning && <span>{warning}</span>))
				}
			</p>
		</div>
	);
};

FormInput.propTypes = {
	type: PropTypes.string,
	label: PropTypes.element,
	placeholder: PropTypes.string,
	name: PropTypes.string,
	disabled: PropTypes.bool,
	value: PropTypes.string,
	multiline: PropTypes.bool,
	required: PropTypes.bool,
	shrink: PropTypes.bool,
	InputLabelProps: PropTypes.instanceOf(Object),
	fullBox: PropTypes.bool,
	InputProps: PropTypes.instanceOf(Object),
	fullWidth: PropTypes.bool,
	onFocus: PropTypes.func,
	onChange: PropTypes.func,
	input: PropTypes.instanceOf(Object),
	meta: PropTypes.instanceOf(Object),
	autoFocus: PropTypes.bool
};

FormInput.defaultProps = {
	type: "",
	label: null,
	placeholder: "",
	name: "",
	disabled: null,
	value: "",
	multiline: null,
	required: false,
	shrink: null,
	InputLabelProps: {},
	fullBox: null,
	InputProps: {},
	fullWidth: null,
	onFocus: () => {},
	onChange: () => {},
	input: {},
	meta: {},
	autoFocus: false
};

export default FormInput;

How to use this compo:

							<FormInput
								type="text"
								name="name"
								fullWidth
								shrink
								fullBox
								value={name}
								onChange={e => onChangeOfInputSectionName(e)}
								onClick={e => e.stopPropagation()}
							/>