---
# System prepended metadata

title: Mixins
tags: [brew-js-react]

---

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

# Mixins

Mixins are instances of objects that provides ref callbacks, CSS class names and custom DOM attributes.

Plugins that do not fit the React component life cycle can make use of mixins to inject behaviors.

Also multiple mixins can be injected to the same DOM element by `Mixin.use` which merges all the necessary properties.

```typescript
function Component() {
    const flyoutMixin = useFlyoutMixin();
    return (
        <div {...Mixin.use(flyoutMixin)}>
            {...}
        </div>
    );
}
```

:::warning
**Important:** `Mixin.use` returns the `ref` and `className` properties of an intrinsic React element. If you need to specify `ref` and `className` along with mixins, put those within `Mixin.use`:
:::

```typescript
function Component() {
    const myRef = useRef();
    const flyoutMixin = useFlyoutMixin();
    return (
        <div {...Mixin.use(myRef, flyoutMixin, 'my-class-name')}>
            {...}
        </div>
    );
}
```
