From 62a9311ddd237341b29389fdb3ed5ee72e6fadd6 Mon Sep 17 00:00:00 2001 From: noah Date: Fri, 6 Jan 2023 23:00:12 +0100 Subject: [PATCH 1/3] Feature placeholderTextColor for searchbar text input --- components/MultipleSelectList.tsx | 2 ++ components/SelectList.tsx | 2 ++ index.d.ts | 10 ++++++++++ 3 files changed, 14 insertions(+) diff --git a/components/MultipleSelectList.tsx b/components/MultipleSelectList.tsx index 1e8e3326..03646315 100644 --- a/components/MultipleSelectList.tsx +++ b/components/MultipleSelectList.tsx @@ -19,6 +19,7 @@ const MultipleSelectList: React.FC = ({ fontFamily, setSelected, placeholder, + placeholderTextColor, boxStyles, inputStyles, dropdownStyles, @@ -131,6 +132,7 @@ const MultipleSelectList: React.FC = ({ { let result = data.filter((item: L1Keys) => { val.toLowerCase(); diff --git a/components/SelectList.tsx b/components/SelectList.tsx index 5e7a6771..a39ca11d 100644 --- a/components/SelectList.tsx +++ b/components/SelectList.tsx @@ -17,6 +17,7 @@ type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined } const SelectList: React.FC = ({ setSelected, placeholder, + placeholderTextColor, boxStyles, inputStyles, dropdownStyles, @@ -137,6 +138,7 @@ const SelectList: React.FC = ({ { let result = data.filter((item: L1Keys) => { val.toLowerCase(); diff --git a/index.d.ts b/index.d.ts index cee3ba03..3b006350 100644 --- a/index.d.ts +++ b/index.d.ts @@ -13,6 +13,11 @@ export interface SelectListProps { */ placeholder?: string, + /** + * Placeholder text color that will style the placeholder of search text input + */ + placeholderTextColor?: string, + /** * Additional styles for select box */ @@ -126,6 +131,11 @@ export interface MultipleSelectListProps { */ placeholder?: string, + /** + * Placeholder text color that will style the placeholder of search text input + */ + placeholderTextColor?: string, + /** * Additional styles for select box */ From 11537f1f01c54f8ddcae912ba65ee870e4b54c0f Mon Sep 17 00:00:00 2001 From: noah Date: Wed, 11 Jan 2023 11:03:15 +0100 Subject: [PATCH 2/3] Feature update README.md --- README.md | 269 +++++++++++++++++++++++++++--------------------------- 1 file changed, 137 insertions(+), 132 deletions(-) diff --git a/README.md b/README.md index 324d56c1..8d322e4b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -| | | | | | -| --------------------------------------- | -------- | ---------- |---------- |---------- | -| ![NPM VERSION](https://img.shields.io/npm/v/react-native-dropdown-select-list?style=for-the-badge) | ![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-dropdown-select-list?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge) | ![GITHUB STAR](https://img.shields.io/github/stars/danish1658/react-native-dropdown-select-list?label=Give%20Us%20A%20Star&style=for-the-badge) | ![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCEbbpzmnbRiNVhJ3ElABbMQ?label=YOUTUBE%20VIEWS&style=for-the-badge) | ![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-dropdown-select-list?color=%232CA215&style=for-the-badge) +| | | | | | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| ![NPM VERSION](https://img.shields.io/npm/v/react-native-dropdown-select-list?style=for-the-badge) | ![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-dropdown-select-list?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge) | ![GITHUB STAR](https://img.shields.io/github/stars/danish1658/react-native-dropdown-select-list?label=Give%20Us%20A%20Star&style=for-the-badge) | ![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCEbbpzmnbRiNVhJ3ElABbMQ?label=YOUTUBE%20VIEWS&style=for-the-badge) | ![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-dropdown-select-list?color=%232CA215&style=for-the-badge) |

@@ -27,10 +27,10 @@ Multiple Select List | Select List

Light weight and Easy to use dropdown select list.

-- Style it your way with style props of every view. -- Smooth performance on all platforms IOS, Android and Web. -- Change Font Family Easily which community picker lacks. -- Zero dependencies +- Style it your way with style props of every view. +- Smooth performance on all platforms IOS, Android and Web. +- Change Font Family Easily which community picker lacks. +- Zero dependencies
@@ -38,10 +38,9 @@ Multiple Select List | Select List
-| iOS | Android | Web | Expo | ---------|---------|-----|------| -| ✅ | ✅ | ✅ | ✅ | - +| iOS | Android | Web | Expo | +| --- | ------- | --- | ---- | +| ✅ | ✅ | ✅ | ✅ |
@@ -61,203 +60,209 @@ $ yarn add react-native-dropdown-select-list
# 😎 Basic Usage for SelectList + ```jsx -import { SelectList } from 'react-native-dropdown-select-list' +import { SelectList } from "react-native-dropdown-select-list"; const App = () => { - const [selected, setSelected] = React.useState(""); - + const data = [ - {key:'1', value:'Mobiles', disabled:true}, - {key:'2', value:'Appliances'}, - {key:'3', value:'Cameras'}, - {key:'4', value:'Computers', disabled:true}, - {key:'5', value:'Vegetables'}, - {key:'6', value:'Diary Products'}, - {key:'7', value:'Drinks'}, - ] - - return( - setSelected(val)} - data={data} - save="value" - /> - ) + { key: "1", value: "Mobiles", disabled: true }, + { key: "2", value: "Appliances" }, + { key: "3", value: "Cameras" }, + { key: "4", value: "Computers", disabled: true }, + { key: "5", value: "Vegetables" }, + { key: "6", value: "Diary Products" }, + { key: "7", value: "Drinks" }, + ]; + return ( + setSelected(val)} + data={data} + save="value" + /> + ); }; ``` +
# 😎 Basic Usage for MultipleSelectList + ```jsx -import { MultipleSelectList } from 'react-native-dropdown-select-list' +import { MultipleSelectList } from "react-native-dropdown-select-list"; const App = () => { - const [selected, setSelected] = React.useState([]); - + const data = [ - {key:'1', value:'Mobiles', disabled:true}, - {key:'2', value:'Appliances'}, - {key:'3', value:'Cameras'}, - {key:'4', value:'Computers', disabled:true}, - {key:'5', value:'Vegetables'}, - {key:'6', value:'Diary Products'}, - {key:'7', value:'Drinks'}, - ] - - return( - setSelected(val)} - data={data} - save="value" - onSelect={() => alert(selected)} - label="Categories" - /> - ) + { key: "1", value: "Mobiles", disabled: true }, + { key: "2", value: "Appliances" }, + { key: "3", value: "Cameras" }, + { key: "4", value: "Computers", disabled: true }, + { key: "5", value: "Vegetables" }, + { key: "6", value: "Diary Products" }, + { key: "7", value: "Drinks" }, + ]; + return ( + setSelected(val)} + data={data} + save="value" + onSelect={() => alert(selected)} + label="Categories" + /> + ); }; ```
- For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@danish1658/react-native-dropdown-select-list)
# 🔧 General Props + Applicable on both SelectList & MultipleSelectList Components -| Name | Type | Description | -| ---- | ---- | ----------- | -| save| string | Pass ('key' or 'value') to save data of your choice in your local state variable -| onSelect| Function | Pass any function that you want to trigger immediately after a value is selected -| placeholder | String | Placeholder text that will be displayed in the select box -| search | boolean | set to false if you dont want to use search functionality -| maxHeight| Number | Maximum height of the dropdown wrapper to occupy -| data| array or array[object]| Data which will be iterated as options of select list -| setSelected| Function | For Setting the option value which will be stored in your local state -| searchicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of search icon -| arrowicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of chevron icon -| closeicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of close icon -| searchPlaceholder| String | Custom placeholder text for search TextInput -| defaultOption| Object | Pass default selected option in key value pair -| fontFamily| string | Pass font name to apply globally on each text field of component -| notFoundText| string | Pass your custom message if any search result returns empty -| dropdownShown| boolean | Control your dropdown ( on & off ) state by changing its value to true or false +| Name | Type | Description | +| -------------------- | ---------------------- | ---------------------------------------------------------------------------------- | +| save | string | Pass ('key' or 'value') to save data of your choice in your local state variable | +| onSelect | Function | Pass any function that you want to trigger immediately after a value is selected | +| placeholder | String | Placeholder text that will be displayed in the select box | +| placeholderTextColor | String | Text color for the placeholder | +| search | boolean | set to false if you dont want to use search functionality | +| maxHeight | Number | Maximum height of the dropdown wrapper to occupy | +| data | array or array[object] | Data which will be iterated as options of select list | +| setSelected | Function | For Setting the option value which will be stored in your local state | +| searchicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of search icon | +| arrowicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of chevron icon | +| closeicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of close icon | +| searchPlaceholder | String | Custom placeholder text for search TextInput | +| defaultOption | Object | Pass default selected option in key value pair | +| fontFamily | string | Pass font name to apply globally on each text field of component | +| notFoundText | string | Pass your custom message if any search result returns empty | +| dropdownShown | boolean | Control your dropdown ( on & off ) state by changing its value to true or false |
# 🔧 General Style Props + Applicable on both SelectList & MultipleSelectList Components -| Name | Type | Description | -| ---- | ---- | ----------- | -| boxStyles| Object| Additional styles for select box parent wrapper -| inputStyles| Object| Additional styles for text of selection box -| dropdownStyles| Object| Additional styles for dropdown scrollview -| dropdownItemStyles| Object| Additional styles for dropdown single list item -| dropdownTextStyles| Object| Additional styles for dropdown list items text -| disabledItemStyles| Object| Additional styles for disabled dropdown list item -| disabledTextStyles| Object| Additional styles for disabled dropdown list items text +| Name | Type | Description | +| ------------------ | ------ | ------------------------------------------------------- | +| boxStyles | Object | Additional styles for select box parent wrapper | +| inputStyles | Object | Additional styles for text of selection box | +| dropdownStyles | Object | Additional styles for dropdown scrollview | +| dropdownItemStyles | Object | Additional styles for dropdown single list item | +| dropdownTextStyles | Object | Additional styles for dropdown list items text | +| disabledItemStyles | Object | Additional styles for disabled dropdown list item | +| disabledTextStyles | Object | Additional styles for disabled dropdown list items text |
# 😎 Advanced Usage + ```jsx -import { SelectList } from 'react-native-dropdown-select-list' +import { SelectList } from "react-native-dropdown-select-list"; const App = () => { - const [selected, setSelected] = React.useState(""); - + const data = [ - {key:'1',value:'Jammu & Kashmir'}, - {key:'2',value:'Gujrat'}, - {key:'3',value:'Maharashtra'}, - {key:'4',value:'Goa'}, + { key: "1", value: "Jammu & Kashmir" }, + { key: "2", value: "Gujrat" }, + { key: "3", value: "Maharashtra" }, + { key: "4", value: "Goa" }, ]; - return( - alert(selected)} - setSelected={setSelected} - fontFamily='lato' - data={data} - arrowicon={} - searchicon={} - search={false} - boxStyles={{borderRadius:0}} //override default styles - defaultOption={{ key:'1', value:'Jammu & Kashmir' }} //default selected option + setSelected={setSelected} + fontFamily="lato" + data={data} + arrowicon={} + searchicon={} + search={false} + boxStyles={{ borderRadius: 0 }} //override default styles + defaultOption={{ key: "1", value: "Jammu & Kashmir" }} //default selected option /> - ) - + ); }; ```
# 😎 Getting Options From Database + ```jsx -import { SelectList } from 'react-native-dropdown-select-list' +import { SelectList } from "react-native-dropdown-select-list"; const App = () => { - const [selected, setSelected] = React.useState(""); - const [data,setData] = React.useState([]); - - React.useEffect(() => - //Get Values from database - axios.get('https://jsonplaceholder.typicode.com/users') - .then((response) => { - // Store Values in Temporary Array - let newArray = response.data.map((item) => { - return {key: item.id, value: item.name} + const [data, setData] = React.useState([]); + + React.useEffect( + () => + //Get Values from database + axios + .get("https://jsonplaceholder.typicode.com/users") + .then((response) => { + // Store Values in Temporary Array + let newArray = response.data.map((item) => { + return { key: item.id, value: item.name }; + }); + //Set Data Variable + setData(newArray); }) - //Set Data Variable - setData(newArray) - }) - .catch((e) => { - console.log(e) - }) - ,[]) - - return( - alert(selected)} /> - ) - + .catch((e) => { + console.log(e); + }), + [] + ); + + return ( + alert(selected)} + /> + ); }; ```
# 🔧 Additional Props -Applicable on MultipleSelectList Only -| Name | Type | Description | -| ---- | ---- | ----------- | -| label| string| Pass any string to be placed instead of default label +Applicable on MultipleSelectList Only +| Name | Type | Description | +| ----- | ------ | ----------------------------------------------------- | +| label | string | Pass any string to be placed instead of default label |
# 🔧 Additional Style Props + Applicable on MultipleSelectList Only -| Name | Type | Description | -| ---- | ---- | ----------- | -| disabledCheckBoxStyles| Object| Additional styles disabled checkbox inside dropdown -| checkBoxStyles| Object| Additional styles for active checkbox -| badgeStyles| Object| Additional styles for badges of selected values -| badgeTextStyles| Object| Additional styles for Text of badges of selected values -| labelStyles| Object| Additional styles for label of multiple select list +| Name | Type | Description | +| ---------------------- | ------ | ------------------------------------------------------- | +| disabledCheckBoxStyles | Object | Additional styles disabled checkbox inside dropdown | +| checkBoxStyles | Object | Additional styles for active checkbox | +| badgeStyles | Object | Additional styles for badges of selected values | +| badgeTextStyles | Object | Additional styles for Text of badges of selected values | +| labelStyles | Object | Additional styles for label of multiple select list |
- # ▶️ Watch Video [![Watch the video](https://i.imgur.com/K8Lt2h4.png)](https://www.youtube.com/watch?v=J9raEY-1KPQ&t=499s) From 8cf7e4dfd332ebc022d7f77494c0ac6493010a50 Mon Sep 17 00:00:00 2001 From: noah Date: Wed, 11 Jan 2023 11:08:36 +0100 Subject: [PATCH 3/3] Fix disable prettier for README.md --- README.md | 270 +++++++++++++++++++++++++++--------------------------- 1 file changed, 133 insertions(+), 137 deletions(-) diff --git a/README.md b/README.md index 8d322e4b..9c906f7a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -| | | | | | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| ![NPM VERSION](https://img.shields.io/npm/v/react-native-dropdown-select-list?style=for-the-badge) | ![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-dropdown-select-list?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge) | ![GITHUB STAR](https://img.shields.io/github/stars/danish1658/react-native-dropdown-select-list?label=Give%20Us%20A%20Star&style=for-the-badge) | ![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCEbbpzmnbRiNVhJ3ElABbMQ?label=YOUTUBE%20VIEWS&style=for-the-badge) | ![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-dropdown-select-list?color=%232CA215&style=for-the-badge) | +| | | | | | +| --------------------------------------- | -------- | ---------- |---------- |---------- | +| ![NPM VERSION](https://img.shields.io/npm/v/react-native-dropdown-select-list?style=for-the-badge) | ![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-dropdown-select-list?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge) | ![GITHUB STAR](https://img.shields.io/github/stars/danish1658/react-native-dropdown-select-list?label=Give%20Us%20A%20Star&style=for-the-badge) | ![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCEbbpzmnbRiNVhJ3ElABbMQ?label=YOUTUBE%20VIEWS&style=for-the-badge) | ![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-dropdown-select-list?color=%232CA215&style=for-the-badge)

@@ -27,10 +27,10 @@ Multiple Select List | Select List

Light weight and Easy to use dropdown select list.

-- Style it your way with style props of every view. -- Smooth performance on all platforms IOS, Android and Web. -- Change Font Family Easily which community picker lacks. -- Zero dependencies +- Style it your way with style props of every view. +- Smooth performance on all platforms IOS, Android and Web. +- Change Font Family Easily which community picker lacks. +- Zero dependencies
@@ -38,9 +38,10 @@ Multiple Select List | Select List
-| iOS | Android | Web | Expo | -| --- | ------- | --- | ---- | -| ✅ | ✅ | ✅ | ✅ | +| iOS | Android | Web | Expo | +--------|---------|-----|------| +| ✅ | ✅ | ✅ | ✅ | +
@@ -60,209 +61,204 @@ $ yarn add react-native-dropdown-select-list
# 😎 Basic Usage for SelectList - ```jsx -import { SelectList } from "react-native-dropdown-select-list"; +import { SelectList } from 'react-native-dropdown-select-list' const App = () => { - const [selected, setSelected] = React.useState(""); + const [selected, setSelected] = React.useState(""); + const data = [ - { key: "1", value: "Mobiles", disabled: true }, - { key: "2", value: "Appliances" }, - { key: "3", value: "Cameras" }, - { key: "4", value: "Computers", disabled: true }, - { key: "5", value: "Vegetables" }, - { key: "6", value: "Diary Products" }, - { key: "7", value: "Drinks" }, - ]; - - return ( - setSelected(val)} - data={data} - save="value" + {key:'1', value:'Mobiles', disabled:true}, + {key:'2', value:'Appliances'}, + {key:'3', value:'Cameras'}, + {key:'4', value:'Computers', disabled:true}, + {key:'5', value:'Vegetables'}, + {key:'6', value:'Diary Products'}, + {key:'7', value:'Drinks'}, + ] + + return( + setSelected(val)} + data={data} + save="value" /> - ); + ) + }; ``` -
# 😎 Basic Usage for MultipleSelectList - ```jsx -import { MultipleSelectList } from "react-native-dropdown-select-list"; +import { MultipleSelectList } from 'react-native-dropdown-select-list' const App = () => { - const [selected, setSelected] = React.useState([]); + const [selected, setSelected] = React.useState([]); + const data = [ - { key: "1", value: "Mobiles", disabled: true }, - { key: "2", value: "Appliances" }, - { key: "3", value: "Cameras" }, - { key: "4", value: "Computers", disabled: true }, - { key: "5", value: "Vegetables" }, - { key: "6", value: "Diary Products" }, - { key: "7", value: "Drinks" }, - ]; - - return ( - setSelected(val)} - data={data} - save="value" - onSelect={() => alert(selected)} - label="Categories" + {key:'1', value:'Mobiles', disabled:true}, + {key:'2', value:'Appliances'}, + {key:'3', value:'Cameras'}, + {key:'4', value:'Computers', disabled:true}, + {key:'5', value:'Vegetables'}, + {key:'6', value:'Diary Products'}, + {key:'7', value:'Drinks'}, + ] + + return( + setSelected(val)} + data={data} + save="value" + onSelect={() => alert(selected)} + label="Categories" /> - ); + ) + }; ```
+ For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@danish1658/react-native-dropdown-select-list)
# 🔧 General Props - Applicable on both SelectList & MultipleSelectList Components -| Name | Type | Description | -| -------------------- | ---------------------- | ---------------------------------------------------------------------------------- | -| save | string | Pass ('key' or 'value') to save data of your choice in your local state variable | -| onSelect | Function | Pass any function that you want to trigger immediately after a value is selected | -| placeholder | String | Placeholder text that will be displayed in the select box | -| placeholderTextColor | String | Text color for the placeholder | -| search | boolean | set to false if you dont want to use search functionality | -| maxHeight | Number | Maximum height of the dropdown wrapper to occupy | -| data | array or array[object] | Data which will be iterated as options of select list | -| setSelected | Function | For Setting the option value which will be stored in your local state | -| searchicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of search icon | -| arrowicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of chevron icon | -| closeicon | JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of close icon | -| searchPlaceholder | String | Custom placeholder text for search TextInput | -| defaultOption | Object | Pass default selected option in key value pair | -| fontFamily | string | Pass font name to apply globally on each text field of component | -| notFoundText | string | Pass your custom message if any search result returns empty | -| dropdownShown | boolean | Control your dropdown ( on & off ) state by changing its value to true or false | +| Name | Type | Description | +| ---- | ---- | ----------- | +| save| string | Pass ('key' or 'value') to save data of your choice in your local state variable +| onSelect| Function | Pass any function that you want to trigger immediately after a value is selected +| placeholder | String | Placeholder text that will be displayed in the select box +| placeholderTextColor | String | Text color for the placeholder +| search | boolean | set to false if you dont want to use search functionality +| maxHeight| Number | Maximum height of the dropdown wrapper to occupy +| data| array or array[object]| Data which will be iterated as options of select list +| setSelected| Function | For Setting the option value which will be stored in your local state +| searchicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of search icon +| arrowicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of chevron icon +| closeicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of close icon +| searchPlaceholder| String | Custom placeholder text for search TextInput +| defaultOption| Object | Pass default selected option in key value pair +| fontFamily| string | Pass font name to apply globally on each text field of component +| notFoundText| string | Pass your custom message if any search result returns empty +| dropdownShown| boolean | Control your dropdown ( on & off ) state by changing its value to true or false
# 🔧 General Style Props - Applicable on both SelectList & MultipleSelectList Components -| Name | Type | Description | -| ------------------ | ------ | ------------------------------------------------------- | -| boxStyles | Object | Additional styles for select box parent wrapper | -| inputStyles | Object | Additional styles for text of selection box | -| dropdownStyles | Object | Additional styles for dropdown scrollview | -| dropdownItemStyles | Object | Additional styles for dropdown single list item | -| dropdownTextStyles | Object | Additional styles for dropdown list items text | -| disabledItemStyles | Object | Additional styles for disabled dropdown list item | -| disabledTextStyles | Object | Additional styles for disabled dropdown list items text | +| Name | Type | Description | +| ---- | ---- | ----------- | +| boxStyles| Object| Additional styles for select box parent wrapper +| inputStyles| Object| Additional styles for text of selection box +| dropdownStyles| Object| Additional styles for dropdown scrollview +| dropdownItemStyles| Object| Additional styles for dropdown single list item +| dropdownTextStyles| Object| Additional styles for dropdown list items text +| disabledItemStyles| Object| Additional styles for disabled dropdown list item +| disabledTextStyles| Object| Additional styles for disabled dropdown list items text
# 😎 Advanced Usage - ```jsx -import { SelectList } from "react-native-dropdown-select-list"; +import { SelectList } from 'react-native-dropdown-select-list' const App = () => { - const [selected, setSelected] = React.useState(""); + const [selected, setSelected] = React.useState(""); + const data = [ - { key: "1", value: "Jammu & Kashmir" }, - { key: "2", value: "Gujrat" }, - { key: "3", value: "Maharashtra" }, - { key: "4", value: "Goa" }, + {key:'1',value:'Jammu & Kashmir'}, + {key:'2',value:'Gujrat'}, + {key:'3',value:'Maharashtra'}, + {key:'4',value:'Goa'}, ]; - return ( - alert(selected)} - setSelected={setSelected} - fontFamily="lato" - data={data} - arrowicon={} - searchicon={} - search={false} - boxStyles={{ borderRadius: 0 }} //override default styles - defaultOption={{ key: "1", value: "Jammu & Kashmir" }} //default selected option + setSelected={setSelected} + fontFamily='lato' + data={data} + arrowicon={} + searchicon={} + search={false} + boxStyles={{borderRadius:0}} //override default styles + defaultOption={{ key:'1', value:'Jammu & Kashmir' }} //default selected option /> - ); + ) + }; ```
# 😎 Getting Options From Database - ```jsx -import { SelectList } from "react-native-dropdown-select-list"; +import { SelectList } from 'react-native-dropdown-select-list' const App = () => { + const [selected, setSelected] = React.useState(""); - const [data, setData] = React.useState([]); - - React.useEffect( - () => - //Get Values from database - axios - .get("https://jsonplaceholder.typicode.com/users") - .then((response) => { - // Store Values in Temporary Array - let newArray = response.data.map((item) => { - return { key: item.id, value: item.name }; - }); - //Set Data Variable - setData(newArray); + const [data,setData] = React.useState([]); + + React.useEffect(() => + //Get Values from database + axios.get('https://jsonplaceholder.typicode.com/users') + .then((response) => { + // Store Values in Temporary Array + let newArray = response.data.map((item) => { + return {key: item.id, value: item.name} }) - .catch((e) => { - console.log(e); - }), - [] - ); - - return ( - alert(selected)} - /> - ); + //Set Data Variable + setData(newArray) + }) + .catch((e) => { + console.log(e) + }) + ,[]) + + return( + alert(selected)} /> + ) + }; ```
# 🔧 Additional Props - Applicable on MultipleSelectList Only -| Name | Type | Description | -| ----- | ------ | ----------------------------------------------------- | -| label | string | Pass any string to be placed instead of default label | +| Name | Type | Description | +| ---- | ---- | ----------- | +| label| string| Pass any string to be placed instead of default label +
# 🔧 Additional Style Props - Applicable on MultipleSelectList Only -| Name | Type | Description | -| ---------------------- | ------ | ------------------------------------------------------- | -| disabledCheckBoxStyles | Object | Additional styles disabled checkbox inside dropdown | -| checkBoxStyles | Object | Additional styles for active checkbox | -| badgeStyles | Object | Additional styles for badges of selected values | -| badgeTextStyles | Object | Additional styles for Text of badges of selected values | -| labelStyles | Object | Additional styles for label of multiple select list | +| Name | Type | Description | +| ---- | ---- | ----------- | +| disabledCheckBoxStyles| Object| Additional styles disabled checkbox inside dropdown +| checkBoxStyles| Object| Additional styles for active checkbox +| badgeStyles| Object| Additional styles for badges of selected values +| badgeTextStyles| Object| Additional styles for Text of badges of selected values +| labelStyles| Object| Additional styles for label of multiple select list
+ # ▶️ Watch Video [![Watch the video](https://i.imgur.com/K8Lt2h4.png)](https://www.youtube.com/watch?v=J9raEY-1KPQ&t=499s)