@opentui/react 0.1.8 → 0.1.10

package/README.md

@@ -39,6 +39,7 @@ OpenTUI React provides several built-in components that map to OpenTUI core rend
 - **`<input>`** - Text input field
 - **`<select>`** - Selection dropdown
 - **`<tab-select>`** - Tab-based selection
+- **`<ascii-font>`** - Display ASCII art text with different font styles
 
 ### Styling
 
@@ -135,6 +136,29 @@ function MyComponent() {
 }
 ```
 
+#### `useTerminalDimensions()`
+
+Get current terminal dimensions and automatically update when the terminal is resized.
+
+```tsx
+import { useTerminalDimensions } from "@opentui/react"
+
+function MyComponent() {
+  const { width, height } = useTerminalDimensions()
+
+  return (
+    <group>
+      <text>Terminal dimensions: {width}x{height}</text>
+      <box style={{ width: Math.floor(width / 2), height: Math.floor(height / 3) }}>
+        <text>Half-width, third-height box</text>
+      </box>
+    </group>
+  )
+}
+```
+
+**Returns:** An object with `width` and `height` properties representing the current terminal dimensions.
+
 ## Components
 
 ### Text Component
@@ -274,6 +298,67 @@ function SelectExample() {
 }
 ```
 
+### ASCII Font Component
+
+Display ASCII art text with different font styles.
+
+```tsx
+import { measureText } from "@opentui/core"
+import { useState } from "react"
+
+function ASCIIFontExample() {
+  const text = "ASCII"
+  const [font, setFont] = useState<"block" | "shade" | "slick" | "tiny">("tiny")
+
+  const { width, height } = measureText({
+    text,
+    font,
+  })
+
+  return (
+    <group style={{ paddingLeft: 1, paddingRight: 1 }}>
+      <box
+        style={{
+          height: 8,
+          marginBottom: 1,
+        }}
+      >
+        <select
+          focused
+          onChange={(_, option) => setFont(option?.value)}
+          showScrollIndicator
+          options={[
+            {
+              name: "Tiny",
+              description: "Tiny font",
+              value: "tiny",
+            },
+            {
+              name: "Block",
+              description: "Block font",
+              value: "block",
+            },
+            {
+              name: "Slick",
+              description: "Slick font",
+              value: "slick",
+            },
+            {
+              name: "Shade",
+              description: "Shade font",
+              value: "shade",
+            },
+          ]}
+          style={{ flexGrow: 1 }}
+        />
+      </box>
+
+      <ascii-font style={{ width, height }} text={text} font={font} />
+    </group>
+  )
+}
+```
+
 ## Examples
 
 ### Login Form

package/index.js

@@ -65,6 +65,20 @@ var useOnResize = (callback) => {
   }, [renderer, callback]);
   return renderer;
 };
+// src/hooks/use-terminal-dimensions.tsx
+import { useState } from "react";
+var useTerminalDimensions = () => {
+  const renderer = useRenderer();
+  const [dimensions, setDimensions] = useState({
+    width: renderer.terminalWidth,
+    height: renderer.terminalHeight
+  });
+  const cb = (width, height) => {
+    setDimensions({ width, height });
+  };
+  useOnResize(cb);
+  return dimensions;
+};
 // src/reconciler/renderer.ts
 import { createCliRenderer, getKeyHandler } from "@opentui/core";
 import React from "react";
@@ -407,6 +421,7 @@ async function render(node, rendererConfig = {}) {
   _render(React.createElement(AppContext.Provider, { value: { keyHandler, renderer } }, node), renderer.root);
 }
 export {
+  useTerminalDimensions,
   useRenderer,
   useOnResize,
   useKeyboard,

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "src/index.d.ts",
   "type": "module",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "React renderer for building terminal user interfaces using OpenTUI core",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@opentui/core": "0.1.8",
+    "@opentui/core": "0.1.10",
     "react-reconciler": "^0.32.0"
   },
   "devDependencies": {

package/src/hooks/use-terminal-dimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useTerminalDimensions: () => {
+    width: number;
+    height: number;
+};

package/src/index.d.ts

@@ -3,5 +3,6 @@ export * from "./components/app";
 export * from "./hooks/use-keyboard";
 export * from "./hooks/use-renderer";
 export * from "./hooks/use-resize";
+export * from "./hooks/use-terminal-dimensions";
 export * from "./reconciler/renderer";
 export * from "./types/components";