npmpackage.info

Gathering detailed insights and metrics for @kbaseit/kbase-react-native-dropdown-select-list

Other packages similar to @kbaseit/kbase-react-native-dropdown-select-list

react-native-dropdown-select-list

2.0.5

⭐ React Native Select List Equivalent to Html's Select with options"

react-native-select-dropdown

4.0.1

react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for andriod and iOS platforms.

@react-native-community/cli-platform-ios

15.1.2

This package is part of the [React Native CLI](../../README.md). It contains commands for managing iOS part of React Native app.

@syncfusion/ej2-dropdowns

27.2.4

Essential JS 2 DropDown Components

Gathering detailed insights and metrics for @kbaseit/kbase-react-native-dropdown-select-list

@kbaseit/kbase-react-native-dropdown-select-list

☝️ React Native Select List Equivalent to Html's Select with options"

2.0.4

MIT

TypeScript

349

Installations

npm install @kbaseit/kbase-react-native-dropdown-select-list

Pull Requests

Open

2

Total

2

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

2.0.3

Published on 13 Aug 2024

View all 1 releases

Developer

KbaseIT

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

12.22.12

NPM Version

6.14.16 Statistics

97 Commits

1 Forks

1 Branches

Updated on 20 Aug 2024

Languages

TypeScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

349

Last day

Compared to previous day

Last week

Compared to previous week

Last month

-16.2%

Compared to previous month

Last year

349

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

react react-native @types/react @types/react-native typescript

Versions

⭐ React Native Dropdown Select List

React Native Select List Equivalent to Html's Select "

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

Compatibility

iOS	Android	Web	Expo
✅	✅	✅	✅

🔌 Installation

1$ npm install react-native-dropdown-select-list
2

1$ yarn add react-native-dropdown-select-list

😎 Basic Usage for SelectList

1import { SelectList } from 'react-native-dropdown-select-list'
2
3const App = () => {
4
5  const [selected, setSelected] = React.useState("");
6  
7  const data = [
8      {key:'1', value:'Mobiles', disabled:true},
9      {key:'2', value:'Appliances'},
10      {key:'3', value:'Cameras'},
11      {key:'4', value:'Computers', disabled:true},
12      {key:'5', value:'Vegetables'},
13      {key:'6', value:'Diary Products'},
14      {key:'7', value:'Drinks'},
15  ]
16
17  return(
18    <SelectList 
19        setSelected={(val) => setSelected(val)} 
20        data={data} 
21        save="value"
22    />
23  )
24
25};

😎 Basic Usage for MultipleSelectList

1import { MultipleSelectList } from 'react-native-dropdown-select-list'
2
3const App = () => {
4
5  const [selected, setSelected] = React.useState([]);
6  
7  const data = [
8      {key:'1', value:'Mobiles', disabled:true},
9      {key:'2', value:'Appliances'},
10      {key:'3', value:'Cameras'},
11      {key:'4', value:'Computers', disabled:true},
12      {key:'5', value:'Vegetables'},
13      {key:'6', value:'Diary Products'},
14      {key:'7', value:'Drinks'},
15  ]
16
17  return(
18    <MultipleSelectList 
19        setSelected={(val) => setSelected(val)} 
20        data={data} 
21        save="value"
22        onSelect={() => alert(selected)} 
23        label="Categories"
24    />
25  )
26
27};

For Live Demo (Expo Snack)

🔧 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

🔧 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

😎 Advanced Usage

1import { SelectList } from 'react-native-dropdown-select-list'
2
3const App = () => {
4
5  const [selected, setSelected] = React.useState("");
6  
7  const data = [
8    {key:'1',value:'Jammu & Kashmir'},
9    {key:'2',value:'Gujrat'},
10    {key:'3',value:'Maharashtra'},
11    {key:'4',value:'Goa'},
12  ];
13
14  return(
15    <SelectList 
16      onSelect={() => alert(selected)}
17      setSelected={setSelected} 
18      fontFamily='lato'
19      data={data}  
20      arrowicon={<FontAwesome name="chevron-down" size={12} color={'black'} />} 
21      searchicon={<FontAwesome name="search" size={12} color={'black'} />} 
22      search={false} 
23      boxStyles={{borderRadius:0}} //override default styles
24      defaultOption={{ key:'1', value:'Jammu & Kashmir' }}   //default selected option
25    />
26  )
27
28};

😎 Getting Options From Database

1import { SelectList } from 'react-native-dropdown-select-list'
2
3const App = () => {
4
5  const [selected, setSelected] = React.useState("");
6  const [data,setData] = React.useState([]);
7  
8  React.useEffect(() => 
9    //Get Values from database
10    axios.get('https://jsonplaceholder.typicode.com/users')
11      .then((response) => {
12        // Store Values in Temporary Array
13        let newArray = response.data.map((item) => {
14          return {key: item.id, value: item.name}
15        })
16        //Set Data Variable
17        setData(newArray)
18      })
19      .catch((e) => {
20        console.log(e)
21      })
22  ,[])
23
24  return(
25    <SelectList setSelected={setSelected} data={data} onSelect={() => alert(selected)} />
26  )
27
28};

🔧 Additional Props

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

▶️ Watch Video

💲 Would you like to support me?

If you would like me come up with similar packages, buy me a cup of coffee to boost my energy.

For Live Demo (Expo Snack)

No vulnerabilities found.

No security vulnerabilities found.