react-multi-select-v

IOS / ANDROID

#### add on long press, fix names, make props default values

##### npm i react-multi-select-v
##### import {Select} from "react-multi-select-v";

``javascript
is_title_visible={true}
selection_name={"Colors"}
modal_select_title={"Choose "}
button_add_title={"Add"}
modal_button_style={{text:"ok",width:100,height:50,backgroundColor:"#FFFFFF",borderColor:"#D7B8F3"}}

minimum_selected={0}
maximum_selected={4}
styles={styles}
modal_styles={modal_styles}
is_modal={false}
is_mqc={true}

key_name={"id"}
denomination_name={"name"}
colorKey_name={"color"}
data={Colors}

selected_data_keys={SelectedColors}
colored_selection={false}

additional={element => (

{element != null &&
style={{fontSize:15, fontWeight:"200"}}
>
{element.price} €

}

)}
on_selected_change={selectedIds => {
console.log(selectedIds)
}}
/>
`

Default styles,modal_styles props

`javascript
var styles = StyleSheet.create({
Selection_Title: {justifyContent:"center", alignItems:"center", padding:5},
Selection_Box_Title: {backgroundColor:"#dfdfdf", padding:5, width: 200, borderRadius: 15, alignItems: "center", justifyContent: "center"},
Selection_Title_Text: {fontSize:13, fontWeight:"500"},
Element_View: {padding:5},
Element_List: {flexDirection:"row", justifyContent:"space-around", flexWrap: 'wrap'},
Element: {borderRadius:15, padding:10, borderColor:"#FFFFFF", borderWidth:1.5},
Element_Selected: {backgroundColor:"#fdb827", borderWidth:1.5, borderColor:"#000000"},
Element_UnSelected: {backgroundColor:"#f7f7f1"},
Border_Not_Colored: {borderWidth:0}
})

var modal_styles = StyleSheet.create({
MainView: {flex: 1, justifyContent:"center", alignItems:"center"},
FlatList_Container: {flexGrow: 1, justifyContent: "center"},
No_Elements_Text: {fontSize:30, fontWeight:"100"},
Element_Main_View: {padding:5},
Element: {padding: 10, borderRadius: 15},
button_Text: {color:"#000000"}
});
``


| Prop | Description | Value |
|--------------------|------------------------------------------------------------------------------------------------|--------|
| is_title_visible | is the title visible ? | bool |
| selection_name | title name | string |
| modal_select_title | when no element is selected displays, that text on the button followed by the "selection_name" | string |
| button_add_title | add button title ex:"+" | string |
| modal_button_style | style of the button see exemple | dict |
| minimum_selected | minimum value selected | int |
| maximum_selected | maximum value selected | int |
| styles | StyleSheet.create({}) default in component js file | |
| modal_styles | StyleSheet.create({}) default in component js file | |
| is_modal | is the window modal ? | bool |
| is_mqc | multiple choice questions ? | bool |
| key_name | the key that will be returned in an array must be unique | |
| denomination_name | the display name | |
| colorKey_name | the key of the color in the dict | |
| data | data [{denomination:"hey",key:1},{... | array |
| selected_data_keys | selected data [key,key,... | array |
| colored_selection | is the selection using the colorKey_name to display color | bool |
| additional | additional info check exemple | |
| on_selected_change | will trigger on new change | |