Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface FixedPositioningOptions

Hierarchy

Index

Properties

Methods

Properties

Optional anchor

anchor: Partial<PositionAnchor>

The configuration to anchor the fixed element to the container element.

Optional disableSwapping

disableSwapping: boolean

Boolean if the auto-swapping behavior should be disabled. It's normally recommended to not disable this since it'll allow elements to appear off screen.

Optional disableVHBounds

disableVHBounds: boolean

Boolean if the fixed positioning should no longer prevent the fixed element to be positioned within the viewport. This is nice if you want to allow for full page scrolling instead and manually set a max-height on your element.

fixedTo

fixedTo: FixedTo

The element that the transitioning node should be fixed to.

Optional getOptions

getOptions: GetFixedPositionOptions

An optional function to call to dynamically get the options when the node has been added to the DOM. This is helpful if you need to check sizes or other things once the DOM node has been added for initial positioning or other things like that. The returned options will override the existing options

Optional initialX

initialX: number

The initial x value to use when calculating the position instead of finding the container element to determine the the correct position. All the other positioning logic will still be in effect to ensure the element will be visible within the viewport.

Optional initialY

initialY: number

The initial y value to use when calculating the position instead of finding the container element to determine the the correct position. All the other positioning logic will still be in effect to ensure the element will be visible within the viewport.

Optional onEnter

onEnter: (node: HTMLElement, isAppearing: boolean) => void

Type declaration

    • (node: HTMLElement, isAppearing: boolean): void

    • Callback fired before the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

      Parameters

      • node: HTMLElement
      • isAppearing: boolean

      Returns void

Optional onEntered

onEntered: (node: HTMLElement, isAppearing: boolean) => void

Type declaration

    • (node: HTMLElement, isAppearing: boolean): void

    • Callback fired after the "entered" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

      Parameters

      • node: HTMLElement
      • isAppearing: boolean

      Returns void

Optional onEntering

onEntering: (node: HTMLElement, isAppearing: boolean) => void

Type declaration

    • (node: HTMLElement, isAppearing: boolean): void

    • Callback fired after the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

      Parameters

      • node: HTMLElement
      • isAppearing: boolean

      Returns void

Optional onExited

onExited: (node: HTMLElement) => void

Type declaration

    • (node: HTMLElement): void

    • Callback fired after the "exited" status is applied.

      Parameters

      • node: HTMLElement

      Returns void

Optional onPositionChange

onPositionChange: PositionChange

An optional function to call when the provide xPosition and yPosition are not the same as the "calculated" position after trying to make the element fixed within the viewport.

Optional onScroll

onScroll: OnFixedPositionScroll

An optional function to call when the element is in the DOM and a window scroll event has occurred. The main use-case for this is hiding the fixed element when the element or the entire page has a scroll event.

Optional preventOverlap

preventOverlap: boolean

Boolean if the fixed element should no longer be able to overlap the container element. This is useful for autocomplete menus or other components that retain focus on the container element while the fixed element becomes visible.

Optional style

style: CSSProperties

An optional style object to merge and override the generated fixed positioning styles.

example

Overriding

useFixedPositioning({
  // this will force the `top` to always be `0`
  style: { top: 0 },
});
remarks

@since 2.8.0

Optional transformOrigin

transformOrigin: boolean

Boolean if the style object should include the transformOrigin value based on the x and y positions.

Optional vhMargin

vhMargin: number

The viewwidth margin to apply so that the element doesn't need to be directly on the screen edge.

Optional vwMargin

vwMargin: number

The viewwidth margin to apply so that the element doesn't need to be directly on the screen edge.

Optional width

width: PositionWidth
see

PositionWidth

Optional xMargin

xMargin: number

The container width margin to apply so that the element doesn't need to be directly on the container's edge.

Optional yMargin

yMargin: number

The container height margin to apply so that the element doesn't need to be directly on the container's edge

Methods

Optional onResize

  • onResize(event: Event): void

  • An optional function to call when the element is in the DOM and a window resize event has occurred. The main use-case for this is hiding the fixed element when the page is resized.

    Parameters

    • event: Event

    Returns void

Generated using TypeDoc