Sha256: 4d26c6884f1598e7570af8d40e133bd4e096ebfc05e347054d7ba2a85db9de0f
Contents?: true
Size: 990 Bytes
Versions: 598
Compression:
Stored size: 990 Bytes
Contents
import React, { useState } from "react";
import { Button, Drawer, Flex } from "playbook-ui";
const useDrawer = (visible = false) => {
const [opened, setOpened] = useState(visible);
const toggle = () => setOpened(!opened);
return [opened, toggle];
};
const DrawerBreakpoints = () => {
const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
return (
<>
<Flex wrap>
<Button
id="sm"
marginRight="md"
onClick={toggleSmallDrawer}
>
{"Will open at small breakpoint"}
</Button>
</Flex>
<Flex>
<Drawer
behavior={"push"}
breakpoint="sm"
fullHeight
onClose={toggleSmallDrawer}
opened={smallDrawerOpened}
overlay={false}
placement={"right"}
size={"lg"}
>
Open because small breakpoint
</Drawer>
</Flex>
</>
);
};
export default DrawerBreakpoints;
Version data entries
598 entries across 598 versions & 2 rubygems