ComponentsCounter
Counter
stableDisplay component for numeric values. User provides the increment logic.
Browser preview is a simulation. The copied component runs in actual terminal apps.
counter.tsx
0 tests passed
counter.tsx
Installation
npx orizen-tui@latest add counter
if dependency install fails, run: npm install ink@^5.0.1 react@^18.3.1 @types/react@^18.3.18 orizen-tui-core@latest
- Copy and paste the following code into your project.
- Update import paths to match your project setup.
components/ui/orizen/counter.tsx
Usage
counter.imports.tsx
counter.example.tsx
Examples
Basic Usage
counter.example1.tsx
0 tests passed
counter.example1.tsx
Custom Label
counter.example2.tsx
0 tests passed
counter.example2.tsx
Custom Color
counter.example3.tsx
0 seconds
counter.example3.tsx
API Reference
Counter
PropTypeDefaultDescription
valuenumber-Current value (controlled mode)
value-
numberCurrent value (controlled mode)
onChange(value: number) => void-Callback fired when value changes
onChange-
(value: number) => voidCallback fired when value changes
defaultValuenumber0Initial value for uncontrolled mode
defaultValue0
numberInitial value for uncontrolled mode
labelstring"count"Label shown after the counter value
label"count"
stringLabel shown after the counter value
colorstring"green"Text color
color"green"
stringText color
focusbooleanfalseFocus state (makes text bold)
focusfalse
booleanFocus state (makes text bold)