React component to connect and display a remote VNC connection

• 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

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');

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.

VncDisplay accepts a single required property of URL:

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:

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!