react-multi-select-v

visual multi select component

Usage no npm install needed!

<script type="module">
  import reactMultiSelectV from 'https://cdn.skypack.dev/react-multi-select-v';
</script>

README

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";
<Select
    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 => (
      <View>
        {element != null && 
          <Text
            style={{fontSize:15, fontWeight:"200"}}
          >
            {element.price} €
          </Text>
        }
      </View>
    )}
    on_selected_change={selectedIds => {
      console.log(selectedIds)
    }}
/>

Default styles,modal_styles props

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