react-vnc-display

React component to connect and display a remote VNC connection

Features from noVNC

• Supports all modern browsers including mobile (iOS, Android)
• Supported VNC encodings: raw, copyrect, rre, hextile, tight, tightPNG
• WebSocket SSL/TLS encryption (i.e. "wss://") support
• 24-bit true color and 8 bit colour mapped
• Supports desktop resize notification/pseudo-encoding
• Local or remote cursor
• Clipboard copy/paste
• Clipping or scolling modes for large remote screens
• Easy site integration and theming (3 example themes included)
• Licensed under the MPL 2.0

Getting started

You can install react-vnc-display via Yarn or npm:

# If using Yarn:
yarn add react-vnc-display

# If using npm:
npm install --save react-vnc-display

The component from react-vnc-display is VncDisplay. This module can be required via ES imports, CommonJS require, or UMD.

import { VncDisplay } from 'react-vnc-display';

// using require
const { VncDisplay } = require('react-vnc-display');

Usage

After importing the component, it can be rendered with the required url prop:

import React from 'react';
import { render } from 'react-dom';
import { VncDisplay } from 'react-vnc-display';

render((
  <VncDisplay url="wss://some-remote-display:5991/path" />
), document.getElementById('root'));

By default the VncDisplay will start out with dimensions of 1280x720, but will be resized to the dimensions of the display once the connection has been established. You can pass noVNC callbacks as props to VncDisplay to customize this and additional behavior.

Props

VncDisplay accepts a single required property of URL:

| Property | Type | Required? | Description | |:---|:---|:---:|:---| | url | String | ✓ | The URL for which to create a remote VNC connection. Should include the protocol, host, port, and path. |

In addition, most of the properties available to noVNC can be provided and will be passed through to the noVNC instance. Here are a few useful props:

| Property | Type | Required? | Description | |:---|:---|:---:|:---| | onClipboard | func | | Execute a function when the VNC connection's clipboard updates. | | onUpdateState | func | | Execute a function when the state of the VNC connection changes. | | shared | bool | | Specify whether a VNC connection should disconnect other connections before connecting. | | wsProtocols | arrayOf(string) | | Specify a list of WebSocket protocols this connection should support. |

Development and Contributing

This repository uses Neutrino and neutrino-preset-react-components for developing, previewing, and building React components. To get started:

• Fork and clone this repo.
• Install the dependencies with yarn.
• Start the development servers with yarn start. Open a browser to http://localhost:5000 to preview the React components.
• Use CTRL-C to exit the dev server.
• Use yarn build to generate the compiled component for publishing to npm.

Feel free to open an issue, submit a pull request, or contribute however you would like. Understand that this documentation is still a work in progress, so file an issue or submit a PR to ask questions or make improvements. Thanks!