---
# System prepended metadata

title: '`FlyoutMixin`'
tags: [brew-js-react]

---

---
tags: brew-js-react
---

# `FlyoutMixin`

```typescript
function Menu() {
    const flyout = useFlyoutMixin();
    return (
        <div>
            <span {...Mixin.use(flyout.toggle, 'menu-toggle')}>Toggle</span>
            <div {...Mixin.use(flyout, 'menu')}>
                {/* content */}
            </div>
        </div>
    );
}
```

## Passing toggle

To let other part of the app to toggle a flyout, the toggle mixin can be passed to child components.

## Events



## Effects
