A React library providing customizable search dropdown components with single and multi-selection capabilities.
npm install dropdowns-js
npm install dropdowns-js
1. Imports
Inside your component, where you use any of the dropdowns, import as follows:
`
// File: MyComponent.jsx
import "dropdowns-js/style.css"; // Must not be left out, so as to enforce dropdown styling.
import {
Dropdown, // If you use it.
DropdownObj, // If you use it.
MultiselectionDropdown, // If you use it.
MultiselectionDropdownObj, // If you use it.
} from "dropdowns-js";export default function MyComponent {
// ...
}
3. Dropdown Component Attributes
label - the name of the data to be displayed displayed in the dropdown. e.g. Cars, Users.
isDisabled - disables the component when set to true. Default = false.
data - data to display in the dropdown, for the user to select from. sortOrder - for dropdowns using primitive type array input. Specifies the sort order of the dropdown data. 'asc' or 'desc'. Default is 'asc'.sortFields - for dropdonws using object type array input. An array. Specifies the field sort orders of the dropdown data. e.g. ['score desc', 'numGames asc']. If a field is to be sorted ascending order, you can ommit asc. .e.g. ['fullName', 'score desc'].displayName - for dropdowns using object type array input. The field (name) by which the dropdown items will be displayed. valueName - for dropdowns using object type array input. The name of the field that will be used as the underlying unique value of each dropdown item. e.g. 'code', 'id'.selectedData - for multi-selection dropdowns. An array of pre-set selection of options. This is an array of multi-selection dropdowns. Optional.selected - for single selection dropdowns. A pre-set selected option.selReset - optional. When set to true, selected item(s) can be set only by the parent component, via selected (single selection dropddowns) or selectedData (multi-selection dropdowns), and the user cannot make a selection/deselection.onItemSelected - for single selection dropdowns. A function to call when the user has made a selection.
onItemsSelected - for multi-selection dropdowns. A function to call when the user has made a selection. Or removed items from their selection.
dropdownStyle - CSS styling for the dropdown. Fields: {color, backgroundColor, borderColor (optional)}.
buttonStyle - for multi-selecton dropdowns. CSS styling for the DONE button (pressed after completing a selection). Fields: {color, backgroundColor}.
4. Dropdown usage example
This dropdown is to be used when the underlying data is a primitive type array.
`
import { Dropdown } from 'dropdowns-js';
import 'dropdowns-js/style.css'; // styles must be imported, otherwise the dropdowns do not display properly.
import { useState } from 'react';export default function MyComponent() {
const [output, setOutput] = useState('');
const fruits = [ "BANANA" "ORANGE", "NAARJIE", "PEACH", "APPLE" ];
/*Respond when the user has chosen a fruit /
function fruitSelected(selFruit) {
setOutput(selFruit);
}
return (
Dropdown Example
Select a fruit
data={fruits}
sortOrder='asc'
onItemSelected={fruitSelected}
selected={"BANANA"}
dropdownStyle={{color: '#000', backgroundColor: '#66ff66'}}
/>
{output}
);
}
`
5. DropdownObj usage example
`
import { DropdownObj } from 'dropdowns-js';
import 'dropdowns-js/style.css'; // Not to be left out.import { useState } from 'react';
export default function MyComponent2() {
const [output, setOutput] = useState('');
const drivingCodes = [
{ code: 'A1', description: 'Light Motorcycles' },
{ code: 'A', description: 'Heavy Motorcycles' },
{ code: 'B', description: 'Light Vehicles' },
{ code: 'EB', description: 'Light Articulated' },
{ code: 'C1', description: 'Heavy Vehicles' },
{ code: 'C', description: 'Extra Heavy Vehicles' },
{ code: 'EC1', description: 'Heavy Articulated' },
{ code: 'EC', description: 'Extra Heavy Articulated' }
];
/*Respond when the user has chosen a driving code /
function drivingCodeSelected(selDrivingCode) {
setOutput(
${selDrivingCode.code} => ${selDrivingCode.description});
} return (
DropdownObj Example
Select driving licence code
displayName="description"
valueName="code"
sortFields={ ['description'] }
onItemSelected={drivingCodeSelected}
selected={drivingCodes[0]}
dropdownStyle={{color: '#000', backgroundColor: '#66ff66'}} />
{output}
);
}
`
6. MultiselectionDropdown usage example
`
import { MultiSelectionDropdown } from 'dropdowns-js';
import 'dropdowns-js/style.css';import { useState } from 'react';
export default function MyComponent3() {
const [output, setOutput] = useState('');
const sport = [
"Motor Racing", "Cycling", "Wrestling", "Kung Fu", "Boxing", "Basket Ball",
"Rugby", "Cricket", "Running", "Soccer", "Netball", "Hockey"
];
/*Respond when the user has chosen an interest /
function sportsSelected(selSports) {
// Obtain the selected items.
const selectedSport = selSports("SPORT").join(", );
setOutput(selectedSport);
}
return (
MultiSelectionDropdown Example
Select an interest, and then your topic
data={sport}
onItemsSelected={sportsSelected}
dropdownStyle={{color: '#000', backgroundColor: '#66ff66'}}
buttonStyle={{color: '#fff', backgroundColor: '#008000'}} />
<>{output}
);
}
` 7. MultiSelectionDropdownObj usage example
`
import 'dropdowns-js/style.css';
import { MultiSelectionDropdownObj } from 'dropdowns-js';import { useState } from 'react';
export default function MyComponent4() {
const [output, setOutput] = useState('');
const drivingCodes = [
{ code: 'A1', description: 'Light Motorcycles' },
{ code: 'A', description: 'Heavy Motorcycles' },
{ code: 'B', description: 'Light Vehicles' },
{ code: 'EB', description: 'Light Articulated' },
{ code: 'C1', description: 'Heavy Vehicles' },
{ code: 'C', description: 'Extra Heavy Vehicles' },
{ code: 'EC1', description: 'Heavy Articulated' },
{ code: 'EC', description: 'Extra Heavy Articulated' }
];
/*Respond when the user has chosen an interest /
function drivCodesSelected(selDrivCode) {
// Create a string array of driving codes.
const strSelectedCodes = selDrivCodes.map((drivCode)=> drivCode.code)
.map(drivCode => drivCode.code)
.join(", ");
setOutput(strSelectedCodes);
}
return (
MultiSelectionDropdownObj Example
Select an interest, and then your topic
data={drivingCodes}
sortFields={ ['description'] }
valueName='code'
displayName='description'
onItemsSelected={drivCodeSelected}
isDisabled={false}
dropdownStyle={{color: '#000', backgroundColor: '#66ff66'}}
buttonStyle={{color: '#fff', backgroundColor: '#008000'}} />
{(output.length > 0) &&
{output}
}
);
}
``