How to use the @chakra-ui/system.createChakra function in @chakra-ui/system
To help you get started, weโve selected a few @chakra-ui/system examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
chakra-ui / chakra-ui / packages / hooks / src / useTabbable / examples.tsx View on Github 
import { storiesOf } from "@storybook/react";
import * as React from "react";
import useTabbable from "./useTabbable";
import { createChakra } from "@chakra-ui/system";
const stories = storiesOf("useTabbable", module);
const Button = createChakra("div", { hook: useTabbable });
stories.add("Button", () => (
<>
<button> {
alert("clicked");
}}
onMouseOver={() => {
console.log("over");
}}
onMouseEnter={() => {
console.log("enter");
}}
display="inline-flex"</button>import React from "react";
import {
TabsProvider,
useTab,
useTabIndicator,
useTabList,
useTabPanel,
useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";
const stories = storiesOf("useTabs", module).addDecorator(story => (
{story()}
));
const Tab = createChakra("button", { hook: useTab });
const TabList = createChakra("div", { hook: useTabList });
const TabPanel = createChakra("div", { hook: useTabPanel });
function TabPanels(props: any) {
const tabpanels = useTabPanels(props);
return {tabpanels};
}
function TabIndicator(props: any) {
const styles = useTabIndicator();
return <div style="{{">;
}
stories.add("useTabs", () => (
</div>import {
TabsProvider,
useTab,
useTabIndicator,
useTabList,
useTabPanel,
useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";
const stories = storiesOf("useTabs", module).addDecorator(story => (
{story()}
));
const Tab = createChakra("button", { hook: useTab });
const TabList = createChakra("div", { hook: useTabList });
const TabPanel = createChakra("div", { hook: useTabPanel });
function TabPanels(props: any) {
const tabpanels = useTabPanels(props);
return {tabpanels};
}
function TabIndicator(props: any) {
const styles = useTabIndicator();
return <div style="{{">;
}
stories.add("useTabs", () => (
Settings</div>import { createChakra } from "@chakra-ui/system";
import { storiesOf } from "@storybook/react";
import React from "react";
import {
Accordion,
AccordionItem,
useAccordionButton,
useAccordionPanel,
} from "./useAccordion";
const stories = storiesOf("useAccordion", module);
const AccordionButton = createChakra("button", {
hook: useAccordionButton,
});
AccordionButton.defaultProps = {
display: "block",
width: "100%",
border: 0,
borderBottom: "1px solid #e2e2e2",
padding: "16px 20px",
fontWeight: 600,
textAlign: "left",
fontSize: "16px",
_expanded: {
bg: "lightgray",
},
};const Menu = createChakra("div", {
hook: useMenu,
});
Menu.defaultProps = {
color: "#212121",
bg: "white",
p: "0.25rem",
rounded: "0.25rem",
border: "1px solid rgba(33, 33, 33, 0.25)",
outline: 0,
width: "240px",
};
const MenuItem = createChakra("button", {
hook: useMenuItem,
});
MenuItem.defaultProps = {
border: 0,
width: "100%",
padding: "0.5em 0.24em",
color: "#212121",
_focus: {
bg: "#006DFF",
color: "white",
},
_expanded: {
bg: "#006DFF",
color: "white",
},import React from "react";
import {
MenuProvider,
useMenu,
useMenuDisclosure,
useMenuItem,
} from "./useMenu";
const stories = storiesOf("useMenu v2", module);
//@ts-ignore
const MenuDisclosure = createChakra("button", {
hook: useMenuDisclosure,
});
const Menu = createChakra("div", {
hook: useMenu,
});
Menu.defaultProps = {
color: "#212121",
bg: "white",
p: "0.25rem",
rounded: "0.25rem",
border: "1px solid rgba(33, 33, 33, 0.25)",
outline: 0,
width: "240px",
};
const MenuItem = createChakra("button", {
hook: useMenuItem,
});AccordionButton.defaultProps = {
display: "block",
width: "100%",
border: 0,
borderBottom: "1px solid #e2e2e2",
padding: "16px 20px",
fontWeight: 600,
textAlign: "left",
fontSize: "16px",
_expanded: {
bg: "lightgray",
},
};
const AccordionPanel = createChakra("div", {
hook: useAccordionPanel,
});
AccordionPanel.defaultProps = {
padding: "16px",
fontFamily: "system-ui",
};
stories.add("default", () => (
Toggle 1
Panel 1import { createChakra, forwardRef } from "@chakra-ui/system";
import { storiesOf } from "@storybook/react";
import React from "react";
import {
MenuProvider,
useMenu,
useMenuDisclosure,
useMenuItem,
} from "./useMenu";
const stories = storiesOf("useMenu v2", module);
//@ts-ignore
const MenuDisclosure = createChakra("button", {
hook: useMenuDisclosure,
});
const Menu = createChakra("div", {
hook: useMenu,
});
Menu.defaultProps = {
color: "#212121",
bg: "white",
p: "0.25rem",
rounded: "0.25rem",
border: "1px solid rgba(33, 33, 33, 0.25)",
outline: 0,
width: "240px",
};TabsProvider,
useTab,
useTabIndicator,
useTabList,
useTabPanel,
useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";
const stories = storiesOf("useTabs", module).addDecorator(story => (
{story()}
));
const Tab = createChakra("button", { hook: useTab });
const TabList = createChakra("div", { hook: useTabList });
const TabPanel = createChakra("div", { hook: useTabPanel });
function TabPanels(props: any) {
const tabpanels = useTabPanels(props);
return {tabpanels};
}
function TabIndicator(props: any) {
const styles = useTabIndicator();
return <div style="{{">;
}
stories.add("useTabs", () => (
Settings
</div>import * as React from "react";
import { storiesOf } from "@storybook/react";
import useModal from "./useModal";
import { ThemeProvider } from "@chakra-ui/theme";
import Portal from "../usePortal/";
import Manager from "./utils/ModalManager";
import useDisclosure from "../useDisclosure";
import FocusLock from "react-focus-lock";
import { createChakra } from "@chakra-ui/system";
const stories = storiesOf("useModal", module);
stories.addDecorator(story => {story()});
const ModalDialog = createChakra("div", { hook: useModal });
function Dialog(props: React.ComponentProps) {
return (
);
}
function SampleModal({ children }: any) {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<button>Open</button>
