React TouchBar Electron

THIS IS A FORK OF THE ORIGINAL PROJECT FROM patrikholcak AS patrikholcak/react-touchbar-electron#71 IS NOT MERGED BECAUSE HE DIDN'T RESPOND.

Define custom TouchBar layouts in your React components and have it automatically set on component mount. Easily map events, directly update state and dispatch actions.

Note: <Popover> and <Group> are broken in Electron 11. See this issue for reference https://github.com/electron/electron/issues/26761

Example

import * as React from "react";
import { TouchBar, Button, Slider } from "@luwol03/react-touchbar-electron";

function App() {
  const [sliderValue, onSliderChange] = React.useState(50);

  return (
    <>
      <TouchBar>
        <Button label="Show alert" onClick={() => alert("Hey!")} />
        <Slider value={sliderValue} onChange={onSliderChange} />
      </TouchBar>
      <div>
        <h1>App</h1>…
      </div>
    </>
  );
}

export default App;

Installation

1. npm i @luwol03/react-touchbar-electron

2. Edit your electron main script:

import { join } from "path";
import { decorateWindow } from "@luwol03/react-touchbar-electron/decorate-window";

const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    preload: join(__dirname, "preload.js"),
  },
  // …
});

decorateWindow(mainWindow);

3. edit your electron preload script:

import { preload } from "@luwol03/react-touchbar-electron/preload";

// register ipc touchbarAPI on `globalThis`
preload();

4. edit your electron renderer script:

import { TouchBar, Button } from "@luwol03/react-touchbar-electron";

function App() {
  return (
    <TouchBar>
      <Button label="It works!" />
    </TouchBar>
  );
}

How it works

the TouchBar component is a context provider, which communicates with the main thread using ipc with methods exposed in the preload script. Each child component then "registers" itself as a TouchBar item.

API

The api pretty much copies the official electron TouchBar API with some exceptions to events, to preserve React conventions:

• click & highlight are onClick in your components
• change & select are onChange in your components

Note: All icons are resolved from the directory where your built electron main is. If you import your images in your component via webpack/parcel/… they should be resolved correclty.

TouchBar

• id: string - A unique identifier for this TouchBar layout, useful when restoring prev layout.
• prevId: string — Restore a previous instance of TouchBar after the actual one is unmounted (eg. dialogs, popovers…)
• enabled: "auto" | boolean - Disable touchbar, if not set or set to auto it will auto detect if it is in an electron frame.
• children: ReactNode - TouchBar items.

Button

• label: string - Button text.
• accessibilityLabel: string - A short description of the button for use by screenreaders like VoiceOver.
• enabled: boolean - Whether the button is in an enabled state.
• backgroundColor: string - Button background color in hex format.
• icon: string — Path to an icon that will be displayed.
• iconPosition: "left" | "right" | "overlay" - Position of icon on the button. Only applicable if icon present.
• onClick: () => any - Function to call when the button is clicked.

ColorPicker

• availableColors: string[] - Array of hex color strings to appear as possible colors to select.
• selectedColor: string - The selected hex color in the picker.
• onChange: (color: string) => any - The color that the user selected from the picker.

Group

groups together one or more TouchBar items.

• children: ReactNode - TouchBar items.

Label

• label: string - Text to display.
• accessibilityLabel: string - A short description of the label for use by screenreaders like VoiceOver.
• textColor: string - Hex color of the label.

Popover

• label: string - Popover button text.
• icon: string — Popover button icon.
• showCloseButton: boolean - Display a close button on the left of the popover.
• children: ReactNode - Popover items.

Scrubber

• selectedStyle: "none" | "background" | "outline" - Selected item style.
• overlayStyle: "none" | "background" | "outline" - Selected overlay item style.
• showArrowButtons: boolean
• mode: "free" | "fixed"
• items: Array<{ label: string; icon?: string }> - An array of items to place in this scrubber.
• onChange: (selectedIndex: number) => any - Called when the user taps an item that was not the last tapped item.
• onClick: (highlightedIndex: number) => any - Called when the user taps any item.

SegmentedControl

• segmentStyle: "automatic" | "rounded" | "textured-rounded" | "round-rect" | "textured-square" | "capsule" | "small-square" | "separated" - Style of the segments
• mode: "single" | "multiple" | "buttons" - The selection mode of the control
• segments: Array<{ label: string; icon?: string; enabled?: boolean }> - An array of segments to place in this control.
• selectedIndex: number - The index of the currently selected segment.
• onChange: (selectedIndex: number, isSelected: boolean) => any - Callback that fires when user changes the value.

Slider

• label: string - Label text.
• value: number - Selected value.
• minValue: number - Minimum value.
• maxValue: number - Maximum value.
• onChange: (newValue: number) => any - Function to call when the slider is changed.

Spacer

• size: "small" | "large" | "flexible" - Size of spacer.

Debugging

• Start the electron main process with TOUCHBAR_DEBUG=true and the library will let you know what’s going on.
• Each component has an id prop which could be used for debugging. This id must be unique to the current TouchBar instance.

Licence

ISC