What's a recommended strategy to toggle middleware?

[kalnode]

What's a recommended way to toggle middleware dynamically?

Say, for example, autoPlacement() is only enabled based on a boolean prop like prop.autoPlacement.

const { floatingStyles } = useFloating(
    trigger,
    content,
    {
        whileElementsMounted: autoUpdate,
        placement: props.placement,
        middleware: [
            autoPlacement(),
            offset({
                mainAxis: 10
            })
        ]
    }
)

[atomiks]

https://floating-ui.com/docs/computePosition#conditional

It works like Rollup plugins where falsy values are filtered out.

middleware: [
  props.autoPlacement && autoPlacement(),
  offset({
    mainAxis: 10
  })
]

[kalnode]

Beauty; thx!

[kalnode]

Trying that out, I have a TS error:

Type 'boolean' is not assignable to type '{ name: string; options?: any; fn: (state: { placement: Placement; x: number; y: number; initialPlacement: Placement; strategy: Strategy; middlewareData: MiddlewareData; rects: ElementRects; platform: Platform; elements: Elements; }) => Promisable<...>; }'.ts(2322)

I see in the doc link, using the suggested type:

type MiddlewareOption = Array<
  Middleware | false | null | undefined
>

But how to apply this?

[kalnode]

@atomiks

[atomiks]

I don't understand the error as it works fine inlined in the latest version. Unless you mean an array specified outside the fn, in which case, you need to match that type.

Standard TS syntax:

const middleware: ThatType = [...];