mega-dropdown

Mega dropdown component with list

Features

• Easy to use
• Custom children support
• Fancy out of the box ui
• Consistent look and feel
• Customizable style
• Pure javascript implementation (with mega features of course)

Installation

npm install --save mega-dropdown  

Usage

import React, { Component } from 'react';  
import Dropdown from 'mega-dropdown';  
  
class Example extends Component {  
  render() {  
     return (  
		 <DropDown  
		  onListItemClicked={(item, index)=> alert(`You clicked item ${JSON.stringify(item)} at index ${index}` )}  
		  triggerComponent={ <Text>Hello there</Text>}  
		  title={"የክፍያ ቁጥር ይምረጡ"}  
		  data={[  
		        {title: "ሞባይል - 0922122763", icon: "phone", subtitle: "ጊዜ ከ ቀን 1 - 5"},  
		        {title: "መብራት - 0922122763", icon: "lightbulb", subtitle: "ጊዜ ከ ቀን 1 - 5"},  
		        {title: "ትራፊክ ቅጣት - 0922122763", icon: "traffic-light", subtitle: "ጊዜ ከ ቀን 1 - 5"},  
		        {title: "ትራፊክ ቅጣት - 0922122763", icon: "traffic-light", subtitle: "ጊዜ ከ ቀን 1 - 5"},  
		    ]}  
		  
	/>
 ); }}  

Properties

name	description	type	default
title	Text label for the header	String	-
data	Array of items for the list	Array	-
triggeringComponent	Component to open the dropdown	Node	_
onListItemClicked	Click listener for the items on the list	Function	_
children	If you want to render custom component	Node	_

Example

git clone https://github.com/360ground/mega-dropdown
cd mega-dropdown/example/Demo  
npm install  
# Then open you meda app to debug 

Copyright and License

MIT License

Copyright 2020-2022 360ground. All rights reserved.