npmpackage.info

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

@jansneeuw/react-native-dropdown-fuzzy-select-list - 2.0.5 | npmpackage.info

@jansneeuw/react-native-dropdown-fuzzy-select-list

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

2.0.5

MIT

TypeScript

46.57 kB

Installations

npm install @jansneeuw/react-native-dropdown-fuzzy-select-list

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.7.0

NPM Version

8.15.0 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

TypeScript (100%)

Developer

JanSneeuw

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

98 Commits

1 Branches

2 Contributors

Updated on Mar 26, 2023

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

2.0.5

Package Id

@jansneeuw/react-native-dropdown-fuzzy-select-list@2.0.5

Unpacked Size

46.57 kB

Size

10.05 kB

File Count

NPM Version

8.15.0

Node Version

18.7.0

Published on

May 31, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

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

⭐ 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.