Macbook computer keyboard style for react component.
import { useState } from "react";
import MacKeyboard from "@uiw/react-mac-keyboard";
function Demo() {
const [keyCode, setKeyCode] = useState([]);
return (
<MacKeyboard
keyCode={keyCode}
onMouseDown={(e, item) => {
if (item.keycode > -1) {
setKeyCode([item.keycode]);
}
}}
onMouseUp={() =>{
setKeyCode([]);
}}
/>
);
}type KeyCodeData = {
keycode: number;
name: string[];
}
interface MacKeyBoardProps {
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
keyCode?: number[];
onMouseDown?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>, item: KeyCodeData) => void;
onMouseUp?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>, item: KeyCodeData) => void;
}Runs the project in development mode.
npm run install
npm run build
npm run startBuilds the app for production to the build folder.
npm run build
npm run docThe build is minified and the filenames include the hashes. Your app is ready to be deployed!
As always, thanks to our amazing contributors!
Made with -action-contributors.
Licensed under the MIT License.