React Mac Keyboard

Macbook computer keyboard style for react component.

Quick Start

import MarkdownPreview from '@uiw/react-mac-keyboard';

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

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;


Runs the project in development mode.

# Step 1, run first, listen to the component compile and output the .js file
npm run ts:watch
# Step 2, listen for compilation output type .d.ts file
npm run types:watch
# Step 3, development mode, listen to compile preview website instance
npm run doc:dev

Builds the app for production to the build folder.

npm run build

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!