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:
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. |
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!