"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface CharacterCounterProps
  extends Omit<
    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
    "value" | "defaultValue" | "onChange"
  > {
  value?: string;
  defaultValue?: string;
  maxLength?: number;
  warningThreshold?: number;
  helperText?: React.ReactNode;
  onValueChange?: (value: string) => void;
  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
}

export function CharacterCounter({
  value,
  defaultValue = "",
  maxLength,
  warningThreshold = 0.85,
  helperText,
  className,
  onValueChange,
  onChange,
  ...props
}: CharacterCounterProps) {
  const isControlled = value !== undefined;
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const currentValue = isControlled ? value ?? "" : internalValue;
  const count = currentValue.length;
  const limit = maxLength ?? 0;
  const thresholdValue =
    limit > 0 ? Math.floor(limit * Math.min(Math.max(warningThreshold, 0), 1)) : 0;
  const isWarning = limit > 0 && count >= thresholdValue;
  const isAtLimit = limit > 0 && count >= limit;

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const nextValue = event.target.value;
    if (!isControlled) {
      setInternalValue(nextValue);
    }
    onValueChange?.(nextValue);
    onChange?.(event);
  };

  return (
    <div className={cn("flex flex-col gap-2", className)}>
      <textarea
        value={currentValue}
        onChange={handleChange}
        maxLength={maxLength}
        className={cn(
          "min-h-[120px] w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground",
          "placeholder:text-muted-foreground",
          "focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-border",
          "disabled:cursor-not-allowed disabled:opacity-50"
        )}
        {...props}
      />
      <div className="flex items-center justify-between text-sm">
        {helperText ? (
          <span className="text-muted-foreground">{helperText}</span>
        ) : (
          <span className="text-muted-foreground">Characters</span>
        )}
        <span
          className={cn(
            "tabular-nums",
            isAtLimit
              ? "text-primary"
              : isWarning
              ? "text-secondary-foreground"
              : "text-muted-foreground"
          )}
        >
          {limit > 0 ? `${count} / ${limit}` : count}
        </span>
      </div>
    </div>
  );
}
Character Counter

Dependencies

Files

Installation
