@uiw/react-mac-keyboard
TypeScript icon, indicating that this package has built-in type declarations

1.1.6 • Public • Published

React Mac Keyboard

react-mac-keyboard

Build & Deploy issues Forks Stars Release npm version

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.

Package Sidebar

Install

npm i @uiw/react-mac-keyboard

Weekly Downloads

7

Version

1.1.6

License

MIT

Unpacked Size

47.1 kB

Total Files

12

Last publish

Collaborators

  • uiwjs
  • wcjiang