Chakra UI Data Display Keyboard Key

Chakra UI Data Display Keyboard Key component is used to show which key combinations can be used to perform certain actions. We can customize each key representation by changing its colors, appearance, size, etc. In this article, we will detail the representation of Chakra UI Data Display Keyboard Key component in terms of practical demonstration.

Prerequisites:

• NPM & Node JS
• React JS
• React JS Chakra UI

Approach:

We have created different keyboard shortcuts visuals that are represented in the application using the Chakra UI Data Display Keyboard Key component. Using this component we can show which keys or combination of key persons a given desired action like Copying, Pasting, etc.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app chakra

Step 2: After creating your project folder(i.e. chakra), move to it by using the following command:

cd chakra

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

The updated dependencies are in the package.json file.

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
 }

Example: Below is the practical implementation of the Chakra UI Data Display Keyboard Key:

Javascript

// App.js
import React from 'react';
import {
    Kbd, Box, Heading, Text, Flex,
    Spacer, ChakraProvider, extendTheme
} from '@chakra-ui/react';
import {
    defineStyle,
    defineStyleConfig
} from '@chakra-ui/react';
const KeyboardShortcut = ({ keys, action }) => (
    <Flex my={4}>
        <Box>
            <Text fontSize="lg">
                Press{' '}
                {keys.map((key, index) => (
                    <React.Fragment key={index}>
                        <Kbd variant={`key${index + 1}`}>
                            {key}
                        </Kbd>
                        {index < keys.length - 1 && ' + '}
                    </React.Fragment>
                ))}
            </Text>
        </Box>
        <Spacer />
        <Box>
            <Text>{action}</Text>
        </Box>
    </Flex>
);
const keyColors = ['#FF5252', '#FFD740', '#69F0AE', '#448AFF'];
const customKeyStyle = (color) =>
    defineStyle({
        background: color,
        color: 'white',
        borderRadius: 'md',
        fontWeight: 'bold',
        _hover: { background: `${color}B3` },
        _focus: { boxShadow: 'outline' },
    });
const kbdTheme = defineStyleConfig({
    defaultProps: {
        size: 'md',
        colorScheme: 'teal',
    },
    variants: {
        key1: customKeyStyle(keyColors[0]),
        key2: customKeyStyle(keyColors[1]),
        key3: customKeyStyle(keyColors[2]),
        key4: customKeyStyle(keyColors[3]),
    },
});
const theme = extendTheme({
    components: {
        Kbd: kbdTheme,
    },
});
const App = () => {
    return (
        <ChakraProvider theme={theme}>
            <Box p={8} maxW="600px" mx="auto">
                <Heading mb={4} as="h1"
                    color="green.500">
                    GeeksforGeeks
                </Heading>
                <Text mb={4} as="h3">
                    Chakra UI Data Display Keyboard Key
                </Text>
                <KeyboardShortcut keys={['ctrl', 'C']}
                    action="Copy selected text" />
                <KeyboardShortcut keys={['alt', 'then', 'F']}
                    action="Open File menu" />
                <KeyboardShortcut keys={['cmd', 'option', 'esc']}
                    action="Open Task Manager" />
                <KeyboardShortcut keys={['shift', 'R']}
                    action="Reload the page" />
            </Box>
        </ChakraProvider>
    );
};
export default App;

Step to run the Application:

npm start 

Output: Now go to http://localhost:3000 in your browser: