シェルコマンドの実行

Fluxlay 壁紙は fluxlay.yaml で宣言されたシェルコマンドを実行し、出力を表示できます。

コマンドの宣言

まず fluxlay.yaml にコマンドを追加します。

fluxlay.yaml
shell:
  hostname:
    run: hostname
    reason: コンピュータ名を表示します。
    required:
      - hostname

ターミナルに表示

useShelluseTerminal を組み合わせてスタイル付きのターミナル出力を表示します。

import { useTerminal, useShell, TerminalThemes } from "@fluxlay/react";
 
function Monitor() {
  const { terminalRef, instance } = useTerminal({
    theme: TerminalThemes.nord
  });
 
  useShell("hostname", {
    terminal: instance,
    refreshInterval: 10000
  });
 
  return <div ref={terminalRef} style={{ height: "100%", width: "100%" }} />;
}

テキストとして表示

runShell を使って生のテキスト出力を取得します。

import { useEffect, useState } from "react";
import { runShell } from "@fluxlay/react";
 
function Hostname() {
  const [name, setName] = useState("");
 
  useEffect(() => {
    runShell("hostname").then(result => {
      if (result.success) setName(result.stdout.trim());
    });
  }, []);
 
  return <p>{name}</p>;
}

ネットワークアクセス

コマンドがネットワークアクセスを必要とする場合、network セクションで宣言します。

fluxlay.yaml
network:
  - origin: https://api.example.com
    reason: データの表示に使用します。

詳細は useShell リファレンスマニフェストリファレンスを参照してください。