A "tag list" to illustrate values that are selected, and an api to allow adding and removing these values. This is useful to show things like the state of a filter selector component. This tag list will also intelligently allow you to expand/show more tags when the tag area has become full. Demo It
#Properties
-
values: (Array of Objects each with the label and value properties) These values each become a tag.
-
onRemove: (function(value)) Called when a tag is clicked.
- tagContainerCollapsedHeight: (Number) This is the height in pixels of the tag area when the area is collapsed. Defaults to 55 px.
- tagContainerExpandedHeight: (Number) This is the height in pixels of the tag area when the area is expanded. Defaults to 150 px.
- placeholderText: (String) What text to show when there are no tags selected.
JSX:
var tags=[{value: "sweet", label: "Chocolate"},
{value: "tart", label: "Strawberry"},
{value: "bitter", label: "Lemon"}];
var removeTag = function(tagValue) {
//update tag values
};
<ReactTagList values={tags} onRemove={removeTag}/>
- Development server
npm run dev
. - Continuously run tests on file changes
npm run watch-test
; - Run tests:
npm test
; - Build
npm run build
;