lvd-fluentui-multitextfield v0.0.2

LVD-FluentUi-MultiTextField

A multiple text field input component, built using the FluentUI library, with the following features:

• specify optional minimum, maximum and initial value count;
• controls for adding and removing input items;
• fine-grained control over input item configuration, including appearance and error message handling.

Also an animated demo which is configured for a minmum of 3 input items, a maximum of 10 and an initial count of 4.

Installation

npm install --save lvd-fluentui-multitextfield

Demo

The demo directory contains a compiled and ready-to-run example. Just open up the index.html file.

Basic Usage

import React from 'react';
import { MultiTextField } from 'lvd-fluentui-multitextfield';

class MultiTextFieldSamplePage extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			values: []
		};

		this._handleValuesChanged = 
			this._handleValuesChanged.bind(this);
	}

	_handleValuesChanged(values) {
		// Do something with the values
		this.setState({
			values: values
		});
	}

	render() {
		return (
			<MultiTextField 
				values={this.state.values}
				onChange={this._handleValuesChanged}
			/>
		);
	}
}

You can find a full working example here.

Styling

You can either directly include the dist/style.css into your html web page or use the @import directive inside your stylesheet if building using webpack:

@import '~lvd-fluentui-multitextfield/dist/style.css';

Also see the component itself.

Building

To build the demo application:

npm run build-app

To build the library:

npm run build-dist

To build both in one sitting:

npm run build

Customization Options

Input Items Configuration Object

A plain javascript object with the following properties:

Add Input Action Configuration Object

A plain javascript object with the following properties:

Remove Input Action Configuration Object

A plain javascript object with the following properties:

Events

Changelog

Version 0.0.2

• Removed item value console logging.

Version 0.0.1

• First tracked version.

Donate

I put some of my free time into developing and maintaining this plugin. If helped you in your projects and you are happy with it, you can...