How to use the @chakra-ui/system.forwardRef 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 / useMenu-v2 / examples.tsx View on Github 
const Submenu2 = forwardRef((props, ref) => {
return (
Open submenu 2
<menu>
<menuitem>Menu 1</menuitem>
<menuitem>Menu 2</menuitem>
</menu>
);
});
const Submenu = forwardRef((props, ref) => {
return (
Open submenu
<menu>
<menuitem> console.log("submenu")}>Submenu 1</menuitem>
<menuitem>
</menuitem></menu>
);
});
function SampleMenu() {
return (MenuItem.defaultProps = {
border: 0,
width: "100%",
padding: "0.5em 0.24em",
color: "#212121",
_focus: {
bg: "#006DFF",
color: "white",
},
_expanded: {
bg: "#006DFF",
color: "white",
},
};
const Submenu2 = forwardRef((props, ref) => {
return (
Open submenu 2
<menu>
<menuitem>Menu 1</menuitem>
<menuitem>Menu 2</menuitem>
</menu>
);
});
const Submenu = forwardRef((props, ref) => {
return (sm: "md",
xs: "sm",
};
type Sizes = keyof typeof sizes;
interface HeadingOptions {
/**
* The size of the Heading.
*/
size?: Sizes;
}
type HeadingProps = SafeMerge, HeadingOptions>;
const Heading = forwardRef(
({ size = "xl", ...props }: HeadingProps, ref: React.Ref) => {
return (
);
},
);
export default Heading;* The gap between the grid items
*/
spacing?: GridProps["gridGap"];
/**
* The column gap between the grid items
*/
spacingX?: GridProps["gridGap"];
/**
* The row gap between the grid items
*/
spacingY?: GridProps["gridGap"];
}
type SimpleGridProps = GridProps & SimpleGridOptions;
const SimpleGrid = forwardRef(
(
{
columns,
spacingX,
spacingY,
spacing,
minChildWidth,
...props
}: SimpleGridProps,
ref: React.Ref,
) => {
const templateColumns = !!minChildWidth
? widthToColumns(minChildWidth)
: countToColumns(columns);
return (
