hooks - useKeyboardUser

View on GitHub

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

The useKeyboardUser hook can be used to determine if user is using the tab key to navigate. This provides a method to display alternative content where tabbing may cause navigation issues.

function MyComponent() {
    const { keyboardUser } = useKeyboardUser();

    if(keyboardUser){
        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%"/>;
    }
}