npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rnative-serachdroplist

v1.0.0

Published

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

Downloads

9

Readme

| | | | | | | --------------------------------------- | -------- | ---------- |---------- |---------- | | NPM VERSION | NPM WEEKLY DOWNLOADS | GITHUB STAR | YOUTUBE VIEWS | NPM LIFETIME DOWNLOADS

React Native Select List Equivalent to Html's Select "

Multiple Select List | 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

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

OR

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

😎 Basic Usage for SelectList

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(
    <SelectList 
        setSelected={(val) => setSelected(val)} 
        data={data} 
        save="value"
    />
  )

};

😎 Basic Usage for MultipleSelectList

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(
    <MultipleSelectList 
        setSelected={(val) => setSelected(val)} 
        data={data} 
        save="value"
        onSelect={() => alert(selected)} 
        label="Categories"
    />
  )

};

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

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'},
  ];

  return(
    <SelectList 
      onSelect={() => alert(selected)}
      setSelected={setSelected} 
      fontFamily='lato'
      data={data}  
      arrowicon={<FontAwesome name="chevron-down" size={12} color={'black'} />} 
      searchicon={<FontAwesome name="search" size={12} color={'black'} />} 
      search={false} 
      boxStyles={{borderRadius:0}} //override default styles
      defaultOption={{ key:'1', value:'Jammu & Kashmir' }}   //default selected option
    />
  )

};

😎 Getting Options From Database

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)
      })
      .catch((e) => {
        console.log(e)
      })
  ,[])

  return(
    <SelectList setSelected={setSelected} data={data} onSelect={() => alert(selected)} />
  )

};

🔧 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

Watch the 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. Paypal For Live Demo (Expo Snack)