react-text-2-list

Simple React component for entering / pasting large quantities of text to list

Usability

Peer dependencies: React and react-dom.

import { Text2List } from 'react-text-2-list';

and include css file (you may include this in different way)

require('../node_modules/react-text-2-list/css/style.css');

Demo

We prepared code sandbox demo. See demo here

props/options

Required props

There is only one mandatory prop: onAdd callback, that is gonna get fired when one or more items get added to the list

import React, {Component} from 'react';
import { Text2List } from 'react-text-2-list';
// You should not forget to include css

export default class FakeComponent extends Component {

	constructor(props) {
		super(props);

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

	onAddCallback(list) {
		console.log(list);
		// do whatever you like with your list,
		// which is an array of strings
	}

	render() {
		return (
			<div>
				<Text2List
					onAdd={this.onAddCallback}
				/>
			</div>
		);
	}
}

classNames

| Property | Default | Description | | ------------ | ------- | ----------- | | classNames | --- | Object containing classnames listed below | | classNames.wrapper | Text2List | Component root element | | classNames.heading | Text2List__heading | h4 tag, the heading of the component | | classNames.input | Text2List__input | Textarea tag | | classNames.buttonsWrapper | Text2List__buttonsWrapper | Div tag wrapping enter and remove all buttons | | classNames.enterButton | Button Button--action | Enter button | | classNames.removeButton | Button Button--underline Text2List__removeAll | Remove all button | | classNames.errorMessage | Text2List__errorMessage | Error message on duplicate entries, if you enable stopOnDuplicate prop | | classNames.errorItems | Text2List__errorItems | span tag wrapping list of duplicate entries in error message | | inputListClassNames | --- | Object containing classnames for InputList component, listed below | | inputListClassNames.wrapper | Text2List__inputList | Component root element | | inputListClassNames.inputItem | Text2List__inputListItem | Li tag, one entry in the list | | inputListClassNames.inputItemText | Text2List__inputListItemText | Entry text in li tag | | inputListClassNames.removeButton | Button Button--underline Text2List__removeOne | Delete button inside the entry |

All props

| Property | Type | Default | Description | | ------------ | ------- | ------- | ----------- | | onAdd | function | none | Callback to invoke on adding item(s) in the list, gets passed array of strings that are entries it the list | | placeholder | string | "1 or more codes accepted" | Placeholder text for textarea | | heading | string | "Product code/number" | Heading(label) text above text area | | separators | string | space and comma | String that we will use to make RegExp to separate entered text in textarea, ie. series of characters separated with pipe | | stopOnDuplicate | boolean | false | If true, it will stop submit if there are duplicate items entered or item already exists in the list. Otherwise, it will just show error message and filter out duplicates on enter | | maxVisibleItems | number | 4 | It will determine the max-height of the list, with 45px being height of one entry and add a scroll if needed | | maxItems | number | none | Max number of allowed entries | | stopOnMaxItemsError | boolean | false | If true, it will stop submit if there are more items entered than specified in maxItems prop. Otherwise, it will just show error message and truncate entries to match max items allowed in list | | validateEntry | function | none | Function that takes single entry as sole argument. Should return true or false | | stopOnValidationError | boolean | false | If true, it will stop submit if if one or more items didn't pass validateEntry check. Otherwise, it will just show error message and filter out invalid entries before enter | | validationErrorMessage | string | "Entries need to be valid." | Error message to show if one or more items didn't pass the validateEntry check. Will get added a list of invalid entries to the end of it | | enterButtonText | string | "Enter" | Text that you want to show on "Enter" button | | asyncValidation | boolean | false | Whether you are going to use async validation. It should work like this: you transition isInPendingState state prop to false when some API call is done and supply validateEntry that checks if entry is one of items that your API returned as invalid. You can alos feed the message from API into validationErrorMessage | | isInPendingState | boolean | false | Use it in combination with asyncValidation prop. Transition it to true while your API call for validation is in progress and to false when it's done. You can also use it for straight submitting to API | | pendingEnterButtonText | string | "Validating..." | Text to display on enter button while isInPendingState is true |

Customizing and contributing

You can contact us in case you need some feature or want to contribute. It's possible that you may need additional className props, we haven't fully tested custom styling. Feel free to contact us should that be a case. You can also freely fork and play around with the project.