내 웹사이트에 터미널을 추가한 이유는 무엇입니까(그리고 어떻게 할 수 있습니까)?

소프트웨어 엔지니어로서 저는 항상 제 personal website에 제 기술을 보여줄 뿐만 아니라 약간의 "괴상한"느낌을 주는 일종의 요소를 갖고 싶다는 생각을 가지고 있었습니다. 그래서 계속해서 사용자 지정 명령이 있는 정적 터미널을 만들었습니다.



이 React 구성 요소는 앱에 추가하려는 모든 사용자를 위해 NPMpackage으로도 게시됩니다.

자세한 내용을 보여주세요

설치 중

NPMnpm install react-terminal 또는 YARNyarn add react-terminal을 사용하여 설치합니다.

용법

commands 객체(값이 문자열 또는 콜백일 수 있는 키-값 쌍)를 선언하고 구성 요소에 소품으로 전달합니다.

import { ReactTerminal } from "react-terminal";

function MyComponent(props) {
  // Define commands here
  const commands = {
    whoami: "jackharper",
    cd: (directory) => `changed path to ${directory}`
  };

  return (
    <ReactTerminal
      commands={commands}
    />
  );
}

또한 TerminalContextProvider 주위에 응용 프로그램 마운트 지점을 래핑해야 합니다. 이는 구성 요소가 마운트 해제된 후 다시 마운트된 경우에도 상태를 유지합니다.

import { TerminalContextProvider } from "react-terminal";

ReactDOM.render(
  <TerminalContextProvider>
    <App/>
  </TerminalContextProvider>,
  rootElement
);

소품의 전체 목록은 readme을 확인하십시오.

데모:

Link to Demo


이 라이브러리에서 버그를 발견한 경우 GitHub 문제here를 제출하십시오.