#Filterbox
A customizable combobox that filters results based on user input.
Requires ImmutableJS and Immstruct
##Installation
some installation method here
##Usage
var Immutable = require('immutable');
var Immstruct = require('immstruct');
var Filterbox = require('filterbox');
/**
* Creates a structure
*/
var filterboxStruct = Immstruct('filterbox');
/**
* Initializes the data within the structure
*/
filterboxStruct.cursor(['filterbox']).update(function() {
return {
input: '',
selected: []
};
});
/**
* This makes the component re-render every time the structure changes ensuring
* that every child has the most recent data.
*/
filterboxStruct.on('swap', function() {
Example.setProps({
cursor: filteboxStruct.cursor(['filterbox']).toJS()
});
});
var Example = React.render(
React.createElement(Filterbox, {
structure: filterboxStruct,
cursor: filterboxStruct.cursor(['filterbox']).toJS(),
options: [],
filterboxProps: {
classes: []
},
inputProps: {
classes: [],
placeholder: ''
},
listProps: {
classes: {
listClasses: [],
itemClasses: []
}
},
selectedProps: {
classes: {
labelClasses: [],
iconClasses: []
}
}
}), document.body);
###structure An immutable structure used to facilitate communication between components and allow access to data from outside the filterbox component.
Note: This prop is required.
###cursor
The actual JS data represented by structure
.
Note: This prop is required.
###options An array of options for the filterbox to search and select from.
Note: Each item in the array must be an object with an id
and name
field.
###filterboxProps
Used to pass in props to the internal Filterbox
component.
classes
takes an array of strings
###inputProps
Used to pass in props to the internal Filter
component.
classes
takes an array of stringsplaceholder
takes a string
###listProps
Used to pass in props to the internal FilteredList
component.
classes
takes an object with the following fieldslistClasses
takes an array of stringsitemClasses
takes an array of strings
###selectedProps
Used to pass in props to the internal Selected
component.
classes
takes an object with the following fieldslabelClasses
takes an array of stringsiconClasses
takes an array of strings