support string arrays in <Text>

coconut-xr · Aug 18, 2023 · 63f27ec · 63f27ec
1 parent 19b0e3c
commit 63f27ec
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/docs/components.md b/docs/components.md
@@ -135,7 +135,7 @@ The image renders a 2D plane with an image. The image also has the properties of
 
 ## Text
 
-Renders a string into individual glyphs based on a multi-channel signed distance function. The text requires the provision of a FontFamilyProvider. The text also has the properties of the container to render a background.
+Renders a string or array of strings into individual glyphs based on a multi-channel signed distance function. The text requires the provision of a FontFamilyProvider. The text also has the properties of the container to render a background.
 
 | Parameter            | Description                                                                                                                                           |
 | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coconut-xr/koestlich",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "homepage": "https://coconut-xr.github.io/koestlich",
   "license": "SEE LICENSE IN LICENSE",
   "description": "user interfaces for Three.js",

diff --git a/src/components/text.tsx b/src/components/text.tsx
@@ -656,11 +656,11 @@ export function useText(
     material,
     ...props
   }: TextProperties & YogaProperties,
-  children: string | undefined,
+  children: string | Array<string> | undefined,
 ): undefined {
   const font = useFont(fontFamily);
 
-  const text = children ?? textDefaults["children"];
+  const text = Array.isArray(children) ? children.join("") : children ?? textDefaults["children"];
 
   const glyphProperties = useMemo<GlyphProperties>(
     () => ({

diff --git a/tests/manual/app.tsx b/tests/manual/app.tsx
@@ -294,7 +294,7 @@ export default function Index() {
                                 fontFamily="roboto"
                                 onClick={() => setBold(!bold)}
                               >
-                                Coconut XR
+                                Coconut {"XR"}!
                               </Text>
                             )}
                             {!bold && (
@@ -308,7 +308,7 @@ export default function Index() {
                                 fontFamily="opensans"
                                 onClick={() => setBold(!bold)}
                               >
-                                Coconut XR
+                              Coconut {"XR"}!
                               </Text>
                             )}
                           </Suspense>