react-propercombo

    0.1.12 • Public • Published

    ProperCombo

    A virtual field that show a ProperSearch component (https://github.com/CBIConsulting/ProperSearch) and display the selected items in boxes inside the field

    Build Status

    Used technologies:

    • React
    • ES6
    • Webpack
    • Babel
    • Node
    • Compass
    • Jasmine
    • Karma

    Features of ProperCombo:

    • Data selection allowed from a list
    • List filtering on search
    • Allow multi and single selection
    • Return the selection
    • List virtual rendered

    The compile and compressed ProperCombo distribution file can be found in the dist folder along with the css file. Add the default stylesheet dist/propercombo.min.css, then import it into any module.

    Live Demo

    Code
    Demo

    External dependencies

    • React and React DOM
    • Underscore

    Preview

    screen shot 2016-04-14 at 18 45 00

    Use this module in your projects

    npm install react-propercombo --save
    

    How to start

    Run:

    npm install
    npm start
    

    Check your http://localhost:8080/ or open http://localhost:8080/

    How to test

    npm test

    Component properties

    • This module has the same properties as ProperSearch component (https://github.com/CBIConsulting/ProperSearch) and...
    • maxHeight: Max. height of the virtual field when it receive new elements, after overcome the max height a scroll bar will appear (Number) Default 100 (px)
    • maxSelection: Max. elements rendered inside the virtual field, after this number of elements if the user select more elements the virtual field will show a item with the number of selected elements (Integer) Default 200
    • secondaryDisplay: Field that will be used to render the items inside the virtual field. It you don't set this field then the field used will be the display field (String) Default 'label'

    Basic Example

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Combo from 'react-propercombo';
     
    // Function Called after select items in the list.
     
    const afterSelect = (data, selection) => {
        console.info(data);
        console.info(selection);
    }
     
    // List data
    const data = [];
     
    for (var i = 10000; i >= 0; i--) {
        data.push({value: 'item-' + i, label: 'Item ' + i});
    }
     
    // Render the Search component
    ReactDOM.render(
        <Combo
            data={data}
            multiSelect={true}
            afterSelect={afterSelect}
        />,
        document.getElementById('example')
    );

    Contributions

    Use GitHub issues for requests.

    Changelog

    Changes are tracked as GitHub releases.

    Install

    npm i react-propercombo

    DownloadsWeekly Downloads

    1

    Version

    0.1.12

    License

    MIT

    Last publish

    Collaborators

    • antonio.gazquez
    • sebastiancbvz
    • mmarinero
    • davidnotplay