React Mac Keyboard


Macbook computer keyboard style for react component.

Quick Start

``js
import { useState } from "react";
import MacKeyboard from "@uiw/react-mac-keyboard";

function Demo() {
const [keyCode, setKeyCode] = useState([]);
return (
keyCode={keyCode}
onMouseDown={(e, item) => {
if (item.keycode > -1) {
setKeyCode([item.keycode]);
}
}}
onMouseUp={() =>{
setKeyCode([]);
}}
/>
);
}
`

Options Props

`typescript
type KeyCodeData = {
keycode: number;
name: string[];
}

interface MacKeyBoardProps {
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
keyCode?: number[];
onMouseDown?: (e: React.MouseEvent, item: KeyCodeData) => void;
onMouseUp?: (e: React.MouseEvent, item: KeyCodeData) => void;
}
`

Development

Runs the project in development mode.

`bash
npm run install
npm run build

npm run start
`

Builds the app for production to the build folder.

`bash
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.