Text Input and Virtual Keyboard for React VR

Team

Arseniy Kotov

Sim Kang

Rishi Raje

Installation

npm install react-vr-textinput

Usage

import TextInput from 'react-vr-textinput'

Exposed Props onSubmit() - provide a call back function that will accept the text from the text input component rows - provide the number of lines you wish the text box to be cols - provide the number of columns you wish the tex box to be x - coordinate for positioniong of all 3 elements (all related off the placement of the text input area) y - coordinate for above z - coordinate for above textColor - color for the text inside the input field backgroundColor - color for the background of the input field keyboardColor - color for keys on keyboard keyboardOnHover - color for the keys when the mouse or vr controller hover over. rotateX - provide the amount of rotate needed on the x axis as a number rotateY - same as #11



If not specified, all props except onSubmit will use default values.

Click the TextBox Component to activate it.

When the user is finished, the keyboard will hide itself after the submit button has been pressed.

Sample code

The following example palces the textInput inside the View Component. Note the props that can be passed in. Beyond these, the text input box can be fully customized by directly accessinf the component source code.

import React from ' react ' ; import { View } from ' react-vr ' ; import TextInput from ' react-vr-textinput ' export default class Example extends React . Component { constructor ( props ) { super ( props ) ; } submitHandler ( string ) { console . log ( ' the text received by the submitHandler is ' + string ) ; } render ( ) { return ( < View > < TextInput onSubmit = { this . submitHandler . bind ( this ) } rows = { 2 } cols = { 20 } x = { - 1 } y = { 0 . 2 } z = { - 1 . 5 } textColor = { ' white ' } backgroundColor = { ' grey ' } keyboardColor = { null } keyboardOnHover = { null } / > < / View > ) ; } } ; AppRegistry . registerComponent ( ' Example ' , ( ) => Example ) ;

Requirements

React VR

Current Issues

This module is fully functional. Our next goal is to refactor for speed and also further enhance customizability through providing users even more props. We are also working on adding auto-complete support for faster typing. This will be an optional component that users can select to enable with their text input box and virtual keyboard. Please feel free to ask for additional functionality and we will try to add features as soon as possible.

Contributing

Fork the repository.

npm install

Create a pull request

Provide info on changes/updates on pull request

Tips