Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free
Developers
RESOURCES
Quick start
Tutorials
How Bit works
Workflows
Slack
Contact us
Blog
OPEN SOURCE
Bit
Components
Collections
Extensions
Platform
Features
Front-end teams
Component libraries
Design systems
Micro frontends
Support
Pricing
Enterprise
Learn more
Developers
RESOURCES
OPEN SOURCE
Platform
Pricing
Enterprise
Login
AO
lekanmedia/ shared-ui

dropdown

v0.0.5arrow_drop_down
v0.0.5
v0.0.4
v0.0.3
v0.0.2
STATUS
Passing
DOWNLOADS
467
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
2 years ago
SIZE
8 KB
Renders a HTML Button element and a dropdown list into a parent container;
Dropdown
Form Elements
React
UI Components
AO
1 contributor
Like
Log in to like
Install dropdown as a package?
Copied
npm i @bit/lekanmedia.shared-ui.dropdown
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just 
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right
SelectButton (
props.className:string,
props.addClass:string,
props.listClass:string,
props.text:string,
props.textStyle:object,
props.icon:string,
props.iconStyle:object,
props.dropdownStyle:object,
props.children:JSX.Element,
props.onClick:function
) : JSX.Element

Renders a HTML Button element and a dropdown list into a parent container;

Arguments
props.className: string

The default class of the button.

props.addClass: string

Add extra class styles to overwrite default class.

props.listClass: string

Add extra class styles to overwrite default class of the dropdown list.

props.text: string

Text for the button.

props.textStyle: object

Style Inline CSS styles for the button text.

props.icon: string

Google Material Icon for the button.

props.iconStyle: object

Style Inline CSS styles for icon.

props.dropdownStyle: object

Style Inline CSS styles for the dropdown list.

props.children: JSX.Element

HTML list elements such as <li></li>, <ol></ol>, <option></option> rendered as dropdown list elements.

props.onClick: function

onclick event function of the button.

Returns
JSX.Element

A `button` and a dropdown list toggled by the `button`.

Dropdown (
props.className:string,
props.addClass:string,
props.listClass:string,
props.text:string,
props.textStyle:object,
props.icon:string,
props.iconStyle:object,
props.dropdownStyle:object,
props.children:JSX.Element,
props.onClick:function
) : JSX.Element

Renders a HTML Button element and a dropdown list into a parent container;

Arguments
props.className: string

The default class of the button.

props.addClass: string

Add extra class styles to overwrite default class.

props.listClass: string

Add extra class styles to overwrite default class of the dropdown list.

props.text: string

Text for the button.

props.textStyle: object

Style Inline CSS styles for the button text.

props.icon: string

Google Material Icon for the button.

props.iconStyle: object

Style Inline CSS styles for icon.

props.dropdownStyle: object

Style Inline CSS styles for the dropdown list.

props.children: JSX.Element

HTML list elements such as <li></li>, <ol></ol>, <option></option> rendered as dropdown list elements.

props.onClick: function

onclick event function of the button.

Returns
JSX.Element

A `SelectButton` and dropdown list with a different CSS styling.