@jberesford/r3f-input v1.2.0

r3f-input

View examples

WARNING: UNDER HEAVY DEVELOPMENT

Each release will aim to be a fully functional and usable release, but breaking API changes WILL be likely for the forseeable future.

A webGL input field component for use with React Three Fiber

This package aims to create a fully-functional and accessible <Input /> component that can be used within the @react-three/fiber ecosystem. Ultimately, the goal is to have fully functioning HTML <form>s -- with all viable input types -- rendered in webGL.

Current implementation of <Input /> binds webGL elements to the existing state and event systems of a hidden HTML <input> element. There is a heavy reliance on troika-three-text for text-rendering and selection/caret logic.

Note that r3f-input will only work within a React-Three-Fiber Canvas element. You must be using

• @react-three/fiber
• @react-three/drei
• troika-three-text

as dependencies in your project to use r3f-input.

Install

npm install @jberesford/r3f-input
# or, if using yarn
yarn install @jberesford/r3f-input

How to use

Create a basic input field like so:

import { Input } from "@jberesford/r3f-input";

export function App() {
  return (
    <Canvas camera={{ position: [0, 0, 1] }}>
      <Input label="Test Input" />
    </Canvas>
  );
}

You can access the value of the input via the onChange callback prop:

The callback is passed the ChangeEvent object from the underlying HTML <input>s change event on every change.

Read more about this event here

import { Input } from "@jberesford/r3f-input";

export function App() {
  const [username, setUsername] = React.useState("");

  // username will always contain the current value

  return (
    <Canvas camera={{ position: [0, 0, 1] }}>
      <Input
        label="Test Input"
        onChange={(ev) => setUsername(ev.target.value)}
      />
    </Canvas>
  );
}

You can also create password inputs:

import { Input } from "@jberesford/r3f-input";

export function App() {
  return (
    <Canvas camera={{ position: [0, 0, 1] }}>
      <Input label="Test Password" type="password" />
    </Canvas>
  );
}

Add custom padding to the text container:

import { Input } from "@jberesford/r3f-input";

/*
 * padding=[0.05, 0.5] -> 5% of width is used to pad left and right, 50% of height for top/bottom
 */

export function App() {
  return (
    <Canvas camera={{ position: [0, 0, 1] }}>
      <Input label="Test Password" padding={[0.05, 0.5]} />
    </Canvas>
  );
}

Change color and background opacity:

import { Input } from "@jberesford/r3f-input";

/*
 * backgroundOpacity defaults to 0.1
 */

export function App() {
  return (
    <Canvas camera={{ position: [0, 0, 1] }}>
      <Input
        label="Test Color/Opacity"
        backgroundOpacity={0.6}
        backgroundColor="black"
        textProps={{ color: "#cfcfff" }}
      />
    </Canvas>
  );
}

NOTE: The textProps and labelProps props can take almost all of the properties that are supported by the underlying troika-three-text mesh.

Similar to the <Input /> component, you can also create a <Textarea /> like so:

import { Textarea } from "@jberesford/r3f-input";

/*
 * backgroundOpacity defaults to 0.1
 */

export function App() {
  return (
    <Canvas camera={{ position: [0, 0, 1] }}>
      <Textarea label="Default Textarea:" />
    </Canvas>
  );
}