Back to Fluentui

FadeCustomization.Stories

packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.stories.md

4.40.2-hotfix2508 B
Original Source
  • A fade variant can be created with the factory function createFadePresence(), then converting the result to a React component using createPresenceComponent():
tsx
import { motionTokens } from '@fluentui/react-components';

const CustomFadeVariant = createPresenceComponentVariant(Fade, {
  duration: motionTokens.durationSlower,
  exitDuration: motionTokens.durationFast,
});

const CustomFade = ({ visible }) => (
  <CustomFadeVariant unmountOnExit visible={visible}>
  </CustomFadeVariant>
);