Sha256: e8ae2093a6549d051a9f2f6b5e2041b1cc17223989f55bf70b4c714bde6965f9
Contents?: true
Size: 1.22 KB
Versions: 100
Compression:
Stored size: 1.22 KB
Contents
import React from 'react'
import { Dropdown, useDropdown, Button } from '../../'
const DropdownWithExternalControl = (props) => {
const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
const options = [
{
label: "United States",
value: "United States",
areaCode: "+1",
icon: "πΊπΈ",
id: "United-states"
},
{
label: "Canada",
value: "Canada",
areaCode: "+1",
icon: "π¨π¦",
id: "canada"
},
{
label: "Pakistan",
value: "Pakistan",
areaCode: "+92",
icon: "π΅π°",
id: "pakistan"
}
];
return (
<div>
<Button
data={{dropdown:'pb-dropdown-trigger'}}
marginBottom='sm'
onClick={() => setIsDropdownClosed(!isDropDownClosed)}
padding="none"
tabIndex={0}
variant="link"
>
{isDropDownClosed ? "Open Dropdown" : "Close Dropdown"}
</Button>
<Dropdown
isClosed={isDropDownClosed}
options={options}
{...props}
>
{options.map((option) => (
<Dropdown.Option key={option.id}
option={option}
/>
))}
</Dropdown>
</div>
)
}
export default DropdownWithExternalControl
Version data entries
100 entries across 100 versions & 2 rubygems