hooks - useStaticContent

View on GitHub

import { useStaticContent } from '@sky-uk/ui-core';

The useStaticContent hook can be used to determine if a static fallback should be used for content with motion.

It combines the useReducedMotion and useKeyboardUser hooks together and will return true if either of these hooks return true.

function MyComponent() {
    const { staticContent } = useStaticContent();

    if(staticContent){
        return <Image src="https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt602bdc56ec7b5bbb/example-image.jpg" alt="" $width="100%"/>;
    }else{
        return <Video src="https://assets.contentstack.io/v3/assets/blt77d122705d37a002/blt335ec01d48fb6d9c/example-video.mp4" autoPlay muted loop $width="100%"/>;
    }
}