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';
import { useWindowScroll } from '@mantine/hooks';
import { Affix, Button, Text, Transition } 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: 20, right: 20 }}>
<Transition transition="slide-up" mounted={scroll.y > 0}>
{(transitionStyles) => (
<Button
leftIcon={<IconArrowUp size={16} />}
style={transitionStyles}
onClick={() => scrollTo({ y: 0 })}
>
Scroll to top
</Button>
)}
</Transition>
</Affix>
</>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Affix component props

NameTypeDescription
position
{ top?: string | number; left?: string | number; bottom?: string | number; right?: string | number; }
Fixed position in px, 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