React-dropdown-picker NPM

react-dropdown-picker

A customizable dropdown component for selecting options.

npm.io npm.io

Installation

npm install react-dropdown-picker  # using npm
yarn add react-dropdown-picker     # using yarn

Features

✅Configurable via props.
✅Stylable via css (or custom components).
✅Best dropdown for small number of options.
- ✔️ AM/PM
- ✔️ Weekly/Monthly/Yearly
- ✔️ Online/Offline
✅Zero Dependency.
✅Small bundle size.

Example Usage

import React, { useState } from 'react';
import CustomSelect from 'react-dropdown-picker';

const MyComponent = () => {
  const [selectedRange, setSelectedRange] = useState('1 W');

  const handleRangeChange = (range) => {
    setSelectedRange(range);
    console.log("Range: ", range);
  };

  const options = [
    { value: 7, label: '1 W' },
    { value: 14, label: '2 W' },
    { value: 21, label: '3 W' },
    { value: 30, label: '1 M' },
    { value: 180, label: '6 M' },
    { value: 365, label: '1 Y' }
  ];

  return (
    <div>
      <CustomSelect
        options={options}
        defaultOption={selectedRange}
        onSelect={handleRangeChange}
        width={30}
      />
    </div>
  );
};

export default MyComponent;

Props

Name	Type	Default	Description
`options`	array	[]	An array of objects representing the options for the dropdown. Each object should have `value` and `label` properties.
`defaultOption`	string		The default selected option label.
`onSelect`	function		A function to be called when an option is selected. It receives the selected option's value as an argument.
`width`	number		The width of the dropdown in pixels.
`zIndex`	number	1	The z-index of the dropdown.
`isUpward`	boolean	false	Determines whether the dropdown should open upward or downward.
`selectedOptionStyle`	object		Custom styles for the selected option.
`dropdownItemStyle`	object		Custom styles for the dropdown items.

`selectedOptionStyle` Properties

Name	Type	Default	Description
`backgroundColor`	string	'#BC7AF9'	The background color of the selected option.
`color`	string	'#FFFFFF'	The text color of the selected option.
`fontSize`	string	'14px'	The font size of the selected option.
`fontWeight`	string	'bold'	The font weight of the selected option.
`borderRadius`	string	'10px'	The border radius of the selected option.
`borderWidth`	string	'0.65px'	The border width of the selected option.
`borderColor`	string	'#BC7AF9'	The border color of the selected option.

`dropdownItemStyle` Properties

Name	Type	Default	Description
`backgroundColor`	string	'#BC7AF9'	The background color of the dropdown items.
`color`	string	'#FFFFFF'	The text color of the dropdown items.
`fontSize`	string	'14px'	The font size of the dropdown items.
`fontWeight`	string	'bold'	The font weight of the dropdown items.
`borderRadius`	string	'10px'	The border radius of the dropdown items.
`borderWidth`	string	'0.65px'	The border width of the dropdown items.
`borderColor`	string	'#BC7AF9'	The border color of the dropdown items.

Customization

import CustomSelect from 'react-dropdown-picker';
import React, { useState } from 'react';

const MyComponent = () => {
  const [selectedRange, setSelectedRange] = useState('1 W');

  const handleRangeChange = (range) => {
    setSelectedRange(range);
    console.log("Range: ", range);
  };

  const options = [
    { value: 7, label: '1 W' },
    { value: 14, label: '2 W' },
    { value: 21, label: '3 W' },
    { value: 30, label: '1 M' },
    { value: 180, label: '6 M' },
    { value: 365, label: '1 Y' }
  ];

  const selectedOptionStyle = {
    backgroundColor: '#BC7AF9',
    color: '#FFFFFF',
    fontSize: '14px',
    fontWeight: 'bold',
    borderRadius: '10px',
    borderWidth: '0.65px', 
    borderColor: '#BC7AF9', 
  };
  
  const dropdownItemStyle = {
    backgroundColor: '#BC7AF9',
    color: '#FFFFFF',
    fontSize: '14px',
    fontWeight: 'bold',
    borderRadius: '10px',
    borderWidth: '0.65px', 
    borderColor: '#BC7AF9', 
  };

  return (
    <div>
      <CustomSelect
        options={options}
        defaultOption={selectedRange}
        onSelect={handleRangeChange}
        width={30}
        zIndex={1}
        isUpward={true}
        selectedOptionStyle={selectedOptionStyle}
        dropdownItemStyle={dropdownItemStyle}
      />
    </div>
  );
};

export default MyComponent;