Sha256: 8cdaed93d976c7d8f3c8d918670962a8105b61ed1b04163f7a841e94df64c060
Contents?: true
Size: 1.22 KB
Versions: 675
Compression:
Stored size: 1.22 KB
Contents
import React from 'react'
import { Dropdown, useDropdown, Button } from 'playbook-ui'
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
675 entries across 675 versions & 2 rubygems