React Terminalizer Player Component

React component for terminalizer player.

Terminalizer player is here.

Installation

# npm
npm install --save react-terminalizer-player

# yarn
yarn add react-terminalizer-player

Install dependencies:

• terminalizer-player
• jquery
• xterm

npm install --save terminalizer-player jquery@3 xterm@3.8.1

Usage

Add the following styles inside of head tags.

<link rel="stylesheet" type="text/css" href="node_modules/xterm/dist/xterm.css">
<link rel="stylesheet" type="text/css" href="node_modules/terminalizer-player/dist/css/terminalizer.css">

Via CDN.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/xterm@3.8.1/dist/xterm.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/terminalizer-player@0.4.1/dist/css/terminalizer.min.css">

Add the following scripts right before end of body tag.

<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/xterm/dist/xterm.js"></script>

Via CDN.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm@3.8.1/dist/xterm.min.js"></script>

Now, you can use terminalizer player in react.

import React from 'react'
import ReactDOM from 'react-dom'

import TerminalizerPlayer from 'react-terminalizer-player'


ReactDOM.render(
  <TerminalizerPlayer
    recordingFile='data.json'
    controls={false}
    autoplay
    repeat
  />,
  document.getElementById('root')
)

Tip: If you are using bundler, You can also import dependencies to bundle instead of adding it right into HTML.

Demo

https://xvezda.github.io/react-terminalizer-player/demo/

License

MIT License.