<PageCard>

# inline

Improves positioning for inline reference elements that span over
multiple lines.

<MiddlewareContainer>
  <MiddlewareBadge type="Placement Modifier" />
</MiddlewareContainer>

<ShowFor packages={['core']}>

```js
import {inline} from '@floating-ui/core';
```

</ShowFor>

<ShowFor packages={['dom']}>

```js
import {inline} from '@floating-ui/dom';
```

</ShowFor>

<ShowFor packages={['react']}>

```js
import {inline} from '@floating-ui/react';
```

</ShowFor>

<ShowFor packages={['react-dom']}>

```js
import {inline} from '@floating-ui/react-dom';
```

</ShowFor>

<ShowFor packages={['vue']}>

```js
import {inline} from '@floating-ui/vue';
```

</ShowFor>

<ShowFor packages={['react-native']}>

```js
import {inline} from '@floating-ui/react-native';
```

</ShowFor>

This is useful for reference elements such as hyperlinks or range
selections, as the default positioning using
`getBoundingClientRect(){:js}` may appear "detached" when
measuring over the bounding box.

</PageCard>

In the following examples, the `placement{:.key}` is
`'top'{:js}`.

Without `inline(){:js}`:

<img
  width={692}
  height={256}
  alt="inline disabled"
  src="/inline-disabled.png"
  className="rounded-lg shadow"
  draggable={false}
/>

With `inline(){:js}`:

<img
  width={692}
  height={256}
  alt="inline enabled"
  src="/inline-enabled.png"
  className="rounded-lg shadow"
  draggable={false}
/>

## Usage

<ShowFor packages={['core', 'dom']}>

```js
computePosition(referenceEl, floatingEl, {
  middleware: [inline()],
});
```

</ShowFor>

<ShowFor packages={['react', 'react-dom', 'react-native']}>

```js
useFloating({
  middleware: [inline()],
});
```

</ShowFor>

<ShowFor packages={['vue']}>

```js
useFloating(reference, floating, {
  middleware: [inline()],
});
```

</ShowFor>

### Choosing a rect

By default, `inline(){:js}` infers which of the
`ClientRect{:.class}`s to choose based on the `placement{:.key}`.
However, you may want a different rect to be chosen.

For instance, if the user hovered over the last client rect, you
likely want the floating element to be placed there. This logic
is only applied when the reference element's rects are disjoined.

```js
function onMouseEnter({clientX: x, clientY: y}) {
  computePosition(referenceEl, floatingEl, {
    middleware: [inline({x, y})],
  }).then(({x, y}) => {
    // ...
  });
}

referenceEl.addEventListener('mouseenter', onMouseEnter);
```

## Order

`inline(){:js}` should generally be placed toward the beginning
of your middleware array, before `flip(){:js}` (if used).

## Options

These are the options you can pass to `inline(){:js}`.

```ts
interface InlineOptions {
  x?: number;
  y?: number;
  padding?: number | SideObject;
}
```

### `x{:.key}`

default: `undefined{:js}`

This is the viewport-relative (client) x-axis coordinate which
can be passed in to choose a rect.

### `y{:.key}`

default: `undefined{:js}`

This is the viewport-relative (client) y-axis coordinate which
can be passed in to choose a rect.

### `padding{:.key}`

default: `2{:js}`

This describes the padding around a disjoined rect when choosing
it.

### Deriving options from state

You can derive the options from the
[middleware lifecycle state](/docs/middleware#middlewarestate):

```js
inline((state) => ({
  padding: state.rects.reference.width,
}));
```
