Check username availability

import { useCheckUsernameAvailability } from "@sublay/react-js";
import { useState } from "react";

function UsernameInput() {
  const checkAvailability = useCheckUsernameAvailability();
  const [available, setAvailable] = useState<boolean | null>(null);

  const handleChange = async (username: string) => {
    if (username.length < 3) return;
    const result = await checkAvailability({ username });
    setAvailable(result.available);
  };

  return (
    <div>
      <input onChange={(e) => handleChange(e.target.value)} />
      {available === true && <span>Available</span>}
      {available === false && <span>Taken</span>}
    </div>
  );
}