react-interactive-list
An interactive, dynamic list of components with add / remove buttons. You define how items are rendered (e.g text input).
Install
npm install -s react-interactive-list
Example
Live Demos
List of text inputs
List of react-select components
; ;// IMPORTANT: This style is responsible for the basic formation;// Some extra styling for the input and the delete button; Component { super; thisrenderInput = thisrenderInput; } { let inputClasses = 'interactive-list-input'; if removable inputClasses += ' interactive-list-input--removable'; return <div className="table"> <span className="table-cell">index+1</span> <div className="table-cell"> <input type="text" className=inputClasses onChange= placeholder=propsplaceholder /> </div> </div> ; } { return <InteractiveList renderItem=thisrenderInput placeholder="Some Text" maxItems=3 /> ; } ;
Properties
Property | Type | Description |
---|---|---|
renderItem (required) |
function | Render each item. It must call its 4th parameter onChangeCallback when the value of the rendered element changes. |
onChange |
function | Callback for when anything in the list changes. It is called with the entire list of values each time. |
onRemoveItem |
function | Callback for when an item is removed. It is called with (uniqueId, value) |
minItems |
Number | Minimum amount of items that must be in the list. The X button does not appear when this is the amount of items in the list. Defaults to 1. |
maxItems |
Number | Maximum amount of items to be added to the list. The add button becomes disabled once this number of items is reached. Defaults to -1, meaning infinite. |
addButtonText |
String | Text to display in the add button. Defaults to 'Add' |
Note that all properties of InteractiveList are also passed to the renderItem
function (its 1st parameter).