import { useActionKey } from "@dreamy-ui/react";

useActionKey returns the action key of the current platform. It will return Ctrl by default, but if the platform is Mac, it will return ⌘.

You can also pass an initial value to the hook. Since during SSR, action key cannot be determined, it will return the initial value. By default it is Ctrl. This is useful when you want to save the action key in the cookie, so it shows the correct action key, even before hydration.

export function UseActionKey() {
	const actionKey = useActionKey();
 
	return <Text>Action key: {actionKey}</Text>;
}

You can also get the action key code using getActionKeyCode function.

import { getActionKeyCode } from "@dreamy-ui/react";
 
const actionKeyCode = getActionKeyCode();

This is useful when you want to integrate with keyboard events.

Example below will toggle color mode on cmd + i or ctrl + i.

import { useColorMode, useEventListener, getActionKeyCode } from "@dreamy-ui/react";
 
export function ToggleColorMode() {
	const { toggleColorMode } = useColorMode();
	
	useEventListener("keydown", (event) => {
		if (event.key === "i" && event[getActionKeyCode()] && !event.shiftKey) {
			toggleColorMode();
		}
	});
}