How to use the reakit.useMenuState function in reakit

To help you get started, we’ve selected a few reakit 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.

github reakit / reakit / stories / index.stories.tsx View on Github external
function Example() {
      const menu = useMenuState();
      return (
        
          Menu
          <menu aria-label="Menu">
            <menuitem>a</menuitem>
            <menuitem>b</menuitem>
            <menuitem>
          </menuitem></menu>
        
      );
    }
    return ;
github reakit / reakit / examples / index.js View on Github external
function ExamplesMenu({ location }) {
  const menu = useMenuState({ unstable_boundariesElement: "viewport" });
  const pathKeys = Object.keys(paths);
  const currentPath = pathKeys.find(key =&gt; location.pathname.includes(key));

  React.useEffect(() =&gt; {
    if (menu.visible) {
      menu.move(`examples-menu-${currentPath}`);
    }
  }, [menu.visible, menu.move, currentPath]);

  return (
    <div style="{{">
      {currentPath}
      <menu aria-label="Examples">
        {pathKeys.map(path =&gt; (
          </menu></div>
github reakit / reakit / stories / index.stories.tsx View on Github external
function Example() {
    const menu = useMenuState({ unstable_animated: true });
    return (
      &lt;&gt;
        Menu
        <menu opacity="" transform="" aria-label="Menu">
          <menuitem>Item 1</menuitem></menu>
github reakit / reakit / stories / index.stories.tsx View on Github external
function Example() {
      const menu = useMenuState({ unstable_animated: true });
      const { opacity, scale } = useSpring({
        opacity: menu.visible ? 1 : 0,
        scale: menu.visible ? 1 : 0,
        onRest: menu.unstable_stopAnimation,
        config: name =&gt; ({
          tension: name === "opacity" ? 250 : 300,
          friction: 25
        })
      });

      return (
        
          Menu
github btzr-io / Villain / packages / villain-react / src / components / menu / index.js View on Github external
({ disclosure, tooltip, items, placement, ariaLabel, forceClose, ...props }, ref) => {
    const menu = useMenuState({ placement, gutter: 20, unstable_animated: true })
    const subRef = React.useRef(null)
    const mainRef = React.useRef(null)

    const [menuHeight, setMenuHeight] = React.useState(0)
    const [submenuState, setSubmenuState] = React.useState(defaultSubmenuState)
    const [animationState, setAnimationState] = React.useState(false)

    const maxHeight = 240

    const reset = () => {
      setSubmenuState({ ...defaultSubmenuState })
    }

    const handleSubmenuOpen = id => {
      setSubmenuState({ ...submenuState, id })
    }