Affix

Render react node inside portal at fixed position
Import

Usage

Affix renders div element with fixed position inside Portal component. Use component to display elements fixed at any position on screen, for example, scroll to top button:

Affix is located at the bottom of the screen, scroll to see it
import { IconArrowUp } from '@tabler/icons-react';
import { useWindowScroll } from '@mantine/hooks';
import { Affix, Button, Text, Transition, rem } from '@mantine/core';
function Demo() {
const [scroll, scrollTo] = useWindowScroll();
return (
<>
<Text align="center">Affix is located at the bottom of the screen, scroll to see it</Text>
<Affix position={{ bottom: rem(20), right: rem(20) }}>
<Transition transition="slide-up" mounted={scroll.y > 0}>
{(transitionStyles) => (
<Button
leftIcon={<IconArrowUp size="1rem" />}
style={transitionStyles}
onClick={() => scrollTo({ y: 0 })}
>
Scroll to top
</Button>
)}
</Transition>
</Affix>
</>
);
}

Affix component props

NameTypeDescription
portalProps
Omit<PortalProps, "children" | "target" | "withinPortal">
Props to pass down to the portal when withinPortal is true
position
{ top?: string | number; left?: string | number; bottom?: string | number; right?: string | number; }
Affix position on screen, defaults to { bottom: 0, right: 0 }
target
HTMLDivElement
Element where portal should be rendered, by default new div element is created and appended to document.body
withinPortal
boolean
Determines whether component should be rendered within portal, defaults to true
zIndex
ZIndex
Root element z-index property