Sha256: 1961318571192ad936cabeb3151a8bc9d0b312d66138a4c1e507961c7d1019f6
Contents?: true
Size: 967 Bytes
Versions: 61
Compression:
Stored size: 967 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"
onClose={toggleSmallDrawer}
opened={smallDrawerOpened}
overlay={false}
placement={"right"}
size={"lg"}
>
Open because small breakpoint
</Drawer>
</Flex>
</>
);
};
export default DrawerBreakpoints;
Version data entries
61 entries across 61 versions & 2 rubygems