TextInput

To add a text input to your game, use the @replay/text-input package.

Example#

my-sprite.js
import { TextInput } from "@replay/text-input";
const MySprite = makeSprite({
render({ state }) {
return [
TextInput({
id: "MyInput",
fontName: "Calibri",
fontSize: 20,
// We control the text in the input through our state.text field
text: state.text,
onChangeText: (text) => {
// Update our state.text field with new value when typing occurs
updateState((s) => ({ ...s, text }));
},
width: 100,
}),
];
},
});
src/index.js
import { TextInputWeb } from "@replay/text-input";
export const options = {
{ TextInput: TextInputWeb }
};

Props#

  • id: (Required) Identifier, must be unique within a single render function.
  • fontName: (Required) Name of the font to use.
  • fontSize: (Required) Size of the font in game coordinates.
  • text: (Required) The text to show in the input. Users typing will trigger onChangeText but will not automatically change the text shown in the input.
  • onChangeText: (Required) A callback with the updated text value when the player types.
  • width: (Required) Width of the text input in game coordinates.
  • numberOfLines: Number of lines text input shows. You should not switch between single and multi-line for the same text input. Default 1.
  • align: Alignment of text in input field, can be "left", "right" or "center". Default "center".
  • x: x coordinate of input. Default 0.
  • y: y coordinate of input. Default 0.
  • color: An RGB hex value (e.g. "#ff0000") or CSS Level 1 keyword (e.g. "green"). Default "black".