Simple Item Switcher control. Faxible for change the design for control. More control over switching element.
Basic Properties to Initilized the ItemSwitcher
<ItemSwitcher
items= {[{text: 'one', value:'one'}, {text: 'two', value:'two'}]}
isMultiple={true}
selectSize={10}
getSelectedValue={this.getSelectedValue}
onChangeValue={this.onChangeValue}
/>
-
items:
it will takes the options list array to load in left side list, using for selection. -
isMultiple:
it provide the functinality to select multiple value from list.true
is enable themultiple
selection andfalse
will remove the multiple select functionality. -
selectSize:
it will define the size of the list view. it task number value such as:1,2,3...
. -
getSelectedValue:
it an event forGet Value
button to get selected list items value. -
onChangeValue
it will provide the selected items value when change switch one items from left to right, you will get value of selected right size list items array.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ItemSwitcher from "react-item-switcher";
export class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedItems: []
}
}
getSelectedValue = (selectedItems) => {
console.log(selectedItems)
this.setState({selectedItems: selectedItems})
};
getChangeValue = (selectedItems) => {
console.log(selectedItems)
this.setState({selectedItems: selectedItems})
}
render() {
return (
<div>
Test element
<ItemSwitcher
items= {[{text: 'one', value:'one'}, {text: 'two', value:'two'}]}
isMultiple={true}
selectSize={10}
getSelectedValue={this.getSelectedValue}
onChangeValue={this.getChangeValue}
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Properties | Description |
---|---|
selectWidth |
using for increase or dicrease the width of list.(e.g selectWidth: "10px") |
leftBackgroundColor and rightBackgroundColor |
using for add the background color in list box. its support color code and hex and rgba color |
leftSelectBorder and rightSelectBorder |
using for add the border style in list box. (e.g leftSelectBorder: "1px solid blue") |
itemTextAlign |
using for align the text. it supports center , left , right |
showGetValueButton |
hide and show the Get Value button.it takes true or false |
<ItemSwitcher
...
selectSize={20}
...
/>
- Using the numeric size to increase and decrease the size of the listbox
<ItemSwitcher
...
leftBackgroundColor={"#898"}
rightBackgroundColor={"blue"}
...
/>
-
leftBackgroundColor
will takes thecolor code
orhex
orrgba
color -
rightBackgroundColor
will takes thecolor code
orhex
orrgba
color -
Using the numeric size to increase and decrease the size of the listbox
<ItemSwitcher
...
leftSelectBorder={"1px solid blue"}
rightSelectBorder={"1px solid green"}
...
/>
- those two property will change the switcher border colors and border width also
<ItemSwitcher
...
itemTextAlign={"center"}
...
/>
- this properties value supports
center
andright
andleft
value
<ItemSwitcher
...
showGetValueButton={true}
...
/>
- This properties takes
block
ornone
value. you can hidenone
value and show byblock
value forGet Value
button.
- Add the State in
react constructor
by
this.state = {
selectedItems: []
}
- call the function in
react element
by
getChangeValue = selectedItems => {
console.log(selectedItems);
this.setState({ selectedItems: selectedItems });
};
- Add the function to
noChangeValue
properties ofItemSwitcher
/** add the method in react smart component */
<ItemSwitcher
...
onChangeValue={this.getChangeValue}
...
/>
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ItemSwitcher from "react-item-switcher";
export class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedItems: []
};
}
getSelectedValue = selectedItems => {
console.log(selectedItems);
this.setState({ selectedItems: selectedItems });
};
getChangeValue = selectedItems => {
console.log(selectedItems);
this.setState({ selectedItems: selectedItems });
};
render() {
return (
<div>
Test element
<ItemSwitcher
items={[{ text: "one", value: "one" }, { text: "two", value: "two" }]}
isMultiple={true}
getSelectedValue={this.getSelectedValue}
onChangeValue={this.getChangeValue}
selectSize={5}
leftBackgroundColor={"#898"}
rightBackgroundColor={"#ddd"}
rightSelectBorder={"2px solid green"}
leftSelectBorder={"2px solid blue"}
itemTextAlign={`right`}
showGetValueButton={'none'}
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);