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, e.g. scroll to top button:

Affix is located at the bottom of the screen, scroll to see it
import { ArrowUpIcon } from '@modulz/radix-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={<ArrowUpIcon />}
style={transitionStyles}
onClick={() => scrollTo({ y: 0 })}
>
Scroll to top
</Button>
)}
</Transition>
</Affix>
</>
);
}

TypeScript

Import component props type:

import type { AffixProps } from '@mantine/core';

AffixProps extends React.ComponentPropsWithoutRef<'div'>, all other props are available under Component props tab.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback