react-vnc-display

React component to connect and display a remote VNC connection

!preview

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:

``bash


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.

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

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

$3

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

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

render((

), 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.

$3

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!