npmpackage.info

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

@pncodebreaker/react-native-dropdown-select-list

Fork of React Native Dropdown Select List with bug fixes & enhancements.

5.0.1

MIT

TypeScript

237.00 B

2,265

Installations

npm install @pncodebreaker/react-native-dropdown-select-list

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.12.1

NPM Version

9.2.0 Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

TypeScript

TypeScript (100%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

PnCodeBreaker

Download Statistics

Total Downloads

2,265

Last Day

Last Week

Last Month

Last Year

1,184

GitHub Statistics

1 Stars

119 Commits

1 Forks

2 Branches

1 Contributors

Bundle Size

429.00 B

Minified

237.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

5.0.1

Package Id

@pncodebreaker/react-native-dropdown-select-list@5.0.1

Unpacked Size

53.13 kB

Size

10.27 kB

File Count

NPM Version

9.2.0

Node Version

18.12.1

Publised On

07 Nov 2023

Total Downloads

Cumulative downloads

Total Downloads

2,265

Last day

-92.9%

Compared to previous day

Last week

41.2%

Compared to previous week

Last month

136.7%

Compared to previous month

Last year

9.5%

1,184

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

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

Versions

This is a fork from React Native Dropdown Select List : https://www.npmjs.com/package/react-native-dropdown-select-list

Fixed Certain Bugs & Enchancing certain features needed therefore this fork and seperate package is made.

What's Fixed & Enchanced in this package :

i. Fixed Default option in MultiSelect.

ii. Added checkicon option as props ( checkicon props ) to change default color or image.

iii. Added props ( labelHeadingColor ) to change default color of text selected.

iv. Added showSelected prop ( showSelected = false ) will not show the selected bubbles on the selection dropdown. This fixes the
visibility of select option data as it was shrinking when selecting a large number of data.

v. Now Added the function to also Add custom input if that data is not present in the list Using customUserInput prop (
boolean ) for both SingleSelect & MultiSelect Dropdown.

use defaultOption={[]} in MultiSelect as array of selected value instead of key value pair ( Object ).

⭐ 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
checkicon	JSX Element	Pass any JSX to this prop like Text, Image or Icon to show instead of checkicon
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
showSelected	boolean	show selected items on the item selection dropdown or not, fixes the visibility bug when selecting large number of data.

🔧 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
labelHeadingColor	TextStyle	Change Color of default Label Heading Text Selected

No vulnerabilities found.

No security vulnerabilities found.