Simplereactcontrols NPM

Description

This project provides re-usable components (Autocomplete,CheckboxList, DropdownList) components for quickly prototyping react applications.

Controls

Autocomplete - Simple auto complete functionality for react applications.
CheckboxList - Simple checkbox list that fires selected and deselected events (currently unstyled)
DropdownList - Simple dropdownlist that fires events on change (Currently unstyled)

Usage

import { Autocomplete, CheckboxList } from "simplereactcontrols";

<Autocomplete
  onFetchData={(searchval, callback) =>
    callback([
      { DisplayText: "Your AutoComplete Result", SomeProperty: "Random Prop" },
    ])
  }
  onSelectedResult={(item) => {
    console.log(item);
  }}
  search
/>

<CheckboxList
  data={[
    { DisplayText: "Label1", DefaultValue: false, Value: 2 },
    { DisplayText: "label2", DefaultValue: false, Value: 1 },
    { DisplayText: "Label2", DefaultValue: false, Value: 2 },
    { DisplayText: "Label4", DefaultValue: false, Value: 3 },
    { DisplayText: "Label5", DefaultValue: false, Value: 2 },
  ]}
  onSelect={(e, item) => console.log(item)}
  onDeselect={(e, item) => console.log(item)}
/>

<DropdownList DefaultValue="Pink" data={[{DisplayText: "Red",  value: "Red"},
                           {DisplayText: "Green",  value: "Green"},
                           {DisplayText: "Blue",  value: "Blue"},
                           {DisplayText: "Pink",  value: "Pink"},
                           {DisplayText: "Purple" , value: "Purple"}]}
                           onSelect={(e,item) => console.log(item)}
                           />
/>