React Mac Keyboard
Macbook computer keyboard style for react component.
Quick Start
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([]);
}}
/>
);
}
Options Props
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;
}
Development
Runs the project in development mode.
npm run install
npm run build
npm run start
Builds the app for production to the build folder.
npm run build
npm run doc
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
Contributors
As always, thanks to our amazing contributors!
Made with github-action-contributors.
License
Licensed under the MIT License.