function UUIDGenerator() {
  const [uuids, setUuids] = React.useState([]);
  const [count, setCount] = React.useState(1);
  const [version, setVersion] = React.useState("v4");
  const [copiedIndex, setCopiedIndex] = React.useState(null);
  const [uppercase, setUppercase] = React.useState(false);
  const [noDashes, setNoDashes] = React.useState(false);

  const generateUUID = React.useCallback(() => {
    const newUuids = [];
    for (let i = 0; i < count; i++) {
      let uuid = crypto.randomUUID();
      if (noDashes) uuid = uuid.replace(/-/g, "");
      if (uppercase) uuid = uuid.toUpperCase();
      newUuids.push(uuid);
    }
    setUuids(newUuids);
    setCopiedIndex(null);
  }, [count, uppercase, noDashes]);

  const copyToClipboard = React.useCallback(async (text, index) => {
    await navigator.clipboard.writeText(text);
    setCopiedIndex(index);
    setTimeout(() => setCopiedIndex(null), 1500);
  }, []);

  const copyAll = React.useCallback(async () => {
    await navigator.clipboard.writeText(uuids.join("\n"));
    setCopiedIndex("all");
    setTimeout(() => setCopiedIndex(null), 1500);
  }, [uuids]);

  return (
    <div className="max-w-2xl mx-auto">
      <div className="flex flex-wrap items-center gap-3 mb-4">
        <div className="flex items-center gap-2">
          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Count</label>
          <input
            type="number"
            min={1}
            max={100}
            value={count}
            onChange={(e) => setCount(Math.max(1, Math.min(100, parseInt(e.target.value) || 1)))}
            className="w-20 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>

        <label className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
          <input
            type="checkbox"
            checked={uppercase}
            onChange={(e) => setUppercase(e.target.checked)}
            className="rounded border-gray-300 dark:border-gray-600"
          />
          Uppercase
        </label>

        <label className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
          <input
            type="checkbox"
            checked={noDashes}
            onChange={(e) => setNoDashes(e.target.checked)}
            className="rounded border-gray-300 dark:border-gray-600"
          />
          No dashes
        </label>

        <button
          onClick={generateUUID}
          className="rounded-md bg-blue-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
        >
          Generate
        </button>
      </div>

      {uuids.length > 0 && (
        <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 overflow-hidden">
          <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700">
            <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
              {uuids.length} UUID{uuids.length > 1 ? "s" : ""} generated
            </span>
            {uuids.length > 1 && (
              <button
                onClick={copyAll}
                className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
              >
                {copiedIndex === "all" ? "Copied!" : "Copy all"}
              </button>
            )}
          </div>
          <div className="divide-y divide-gray-200 dark:divide-gray-700">
            {uuids.map((uuid, i) => (
              <div
                key={i}
                className="flex items-center justify-between px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
              >
                <code className="text-sm font-mono text-gray-900 dark:text-gray-100 select-all">
                  {uuid}
                </code>
                <button
                  onClick={() => copyToClipboard(uuid, i)}
                  className="ml-3 flex-shrink-0 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 font-medium"
                >
                  {copiedIndex === i ? "Copied!" : "Copy"}
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
return UUIDGenerator;

UUID Generator

const WORDS = [
  "lorem","ipsum","dolor","sit","amet","consectetur","adipiscing","elit",
  "sed","do","eiusmod","tempor","incididunt","ut","labore","et","dolore",
  "magna","aliqua","enim","ad","minim","veniam","quis","nostrud",
  "exercitation","ullamco","laboris","nisi","aliquip","ex","ea","commodo",
  "consequat","duis","aute","irure","in","reprehenderit","voluptate",
  "velit","esse","cillum","fugiat","nulla","pariatur","excepteur","sint",
  "occaecat","cupidatat","non","proident","sunt","culpa","qui","officia",
  "deserunt","mollit","anim","id","est","laborum","ac","accumsan",
  "aliquet","ante","aptent","arcu","at","auctor","augue","bibendum",
  "blandit","class","commodo","condimentum","congue","consequat",
  "conubia","convallis","cras","cubilia","cum","curabitur","cursus",
  "dapibus","diam","dictum","dictumst","dignissim","dis","donec",
  "egestas","eget","eleifend","elementum","eros","etiam","euismod",
  "facilisi","facilisis","fames","faucibus","felis","fermentum","feugiat",
  "fringilla","fusce","gravida","habitant","habitasse","hac","hendrerit",
  "himenaeos","iaculis","imperdiet","inceptos","integer","interdum",
  "justo","lacinia","lacus","laoreet","lectus","leo","libero","ligula",
  "litora","lobortis","luctus","maecenas","massa","mattis","mauris",
  "metus","mi","morbi","nam","nascetur","natoque","nec","neque","nibh",
  "nisl","nostra","nunc","odio","orci","ornare","pellentesque",
  "penatibus","per","pharetra","phasellus","placerat","platea","porta",
  "porttitor","posuere","potenti","praesent","pretium","primis","proin",
  "pulvinar","purus","quam","quisque","rhoncus","ridiculus","risus",
  "rutrum","sagittis","sapien","scelerisque","semper","senectus","sociis",
  "sociosqu","sodales","sollicitudin","suscipit","suspendisse","taciti",
  "tellus","torquent","tortor","tristique","turpis","ultrices","ultricies",
  "urna","varius","vehicula","vel","venenatis","vestibulum","vitae",
  "vivamus","viverra","volutpat","vulputate"
];

const FIRST_SENTENCE = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";

function capitalize(s) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

function randomWord() {
  return WORDS[Math.floor(Math.random() * WORDS.length)];
}

function generateSentence(startWithLorem) {
  if (startWithLorem) return FIRST_SENTENCE;
  const len = 6 + Math.floor(Math.random() * 10);
  const words = [];
  for (let i = 0; i < len; i++) words.push(randomWord());
  words[0] = capitalize(words[0]);
  // Occasionally add a comma
  if (len > 6) {
    const commaPos = 2 + Math.floor(Math.random() * (len - 4));
    words[commaPos] = words[commaPos] + ",";
  }
  return words.join(" ") + ".";
}

function generateParagraph(isFirst) {
  const sentenceCount = 4 + Math.floor(Math.random() * 4);
  const sentences = [];
  for (let i = 0; i < sentenceCount; i++) {
    sentences.push(generateSentence(isFirst && i === 0));
  }
  return sentences.join(" ");
}

function generateWords(count) {
  const words = [];
  for (let i = 0; i < count; i++) words.push(randomWord());
  return words.join(" ");
}

return { generateParagraph, generateSentence, generateWords };

function LoremIpsumGenerator() {
  const [output, setOutput] = React.useState("");
  const [count, setCount] = React.useState(3);
  const [unit, setUnit] = React.useState("paragraphs");
  const [startWithLorem, setStartWithLorem] = React.useState(true);
  const [copied, setCopied] = React.useState(false);

  const generate = React.useCallback(() => {
    let result = "";
    if (unit === "paragraphs") {
      const paragraphs = [];
      for (let i = 0; i < count; i++) {
        paragraphs.push(loremWords.generateParagraph(startWithLorem && i === 0));
      }
      result = paragraphs.join("\n\n");
    } else if (unit === "sentences") {
      const sentences = [];
      for (let i = 0; i < count; i++) {
        sentences.push(loremWords.generateSentence(startWithLorem && i === 0));
      }
      result = sentences.join(" ");
    } else {
      result = startWithLorem
        ? "lorem ipsum " + loremWords.generateWords(Math.max(0, count - 2))
        : loremWords.generateWords(count);
    }
    setOutput(result);
    setCopied(false);
  }, [count, unit, startWithLorem]);

  const copyToClipboard = React.useCallback(async () => {
    await navigator.clipboard.writeText(output);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }, [output]);

  return (
    <div className="max-w-2xl mx-auto">
      <div className="flex flex-wrap items-center gap-3 mb-4">
        <div className="flex items-center gap-2">
          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Count</label>
          <input
            type="number"
            min={1}
            max={999}
            value={count}
            onChange={(e) => setCount(Math.max(1, Math.min(999, parseInt(e.target.value) || 1)))}
            className="w-20 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>

        <div className="flex items-center gap-2">
          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Unit</label>
          <select
            value={unit}
            onChange={(e) => setUnit(e.target.value)}
            className="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          >
            <option value="paragraphs">Paragraphs</option>
            <option value="sentences">Sentences</option>
            <option value="words">Words</option>
          </select>
        </div>

        <label className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
          <input
            type="checkbox"
            checked={startWithLorem}
            onChange={(e) => setStartWithLorem(e.target.checked)}
            className="rounded border-gray-300 dark:border-gray-600"
          />
          Start with "Lorem ipsum..."
        </label>

        <button
          onClick={generate}
          className="rounded-md bg-emerald-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-emerald-700 focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
        >
          Generate
        </button>
      </div>

      {output && (
        <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 overflow-hidden">
          <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700">
            <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
              {count} {unit}
            </span>
            <button
              onClick={copyToClipboard}
              className="text-xs text-emerald-600 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-300 font-medium"
            >
              {copied ? "Copied!" : "Copy to clipboard"}
            </button>
          </div>
          <div className="px-4 py-3 text-sm text-gray-800 dark:text-gray-200 leading-relaxed whitespace-pre-wrap max-h-96 overflow-y-auto">
            {output}
          </div>
        </div>
      )}
    </div>
  );
}
return LoremIpsumGenerator;

return render(() => <LoremIpsumGenerator />);

Lorem Ipsum Generator

function HashGenerator() {
  const [input, setInput] = React.useState("");
  const [algorithm, setAlgorithm] = React.useState("SHA-256");
  const [encoding, setEncoding] = React.useState("hex");
  const [results, setResults] = React.useState(null);
  const [copiedKey, setCopiedKey] = React.useState(null);
  const [liveMode, setLiveMode] = React.useState(true);

  const algorithms = ["SHA-1", "SHA-256", "SHA-384", "SHA-512"];

  const computeHash = React.useCallback(async (text, algo) => {
    if (!text) return null;
    const encoder = new TextEncoder();
    const data = encoder.encode(text);
    const hashBuffer = await crypto.subtle.digest(algo, data);
    const hashArray = new Uint8Array(hashBuffer);
    const hex = Array.from(hashArray).map(b => b.toString(16).padStart(2, "0")).join("");
    const base64 = btoa(String.fromCharCode(...hashArray));
    return { hex, base64 };
  }, []);

  const computeAll = React.useCallback(async (text) => {
    if (!text) { setResults(null); return; }
    const all = {};
    for (const algo of algorithms) {
      all[algo] = await computeHash(text, algo);
    }
    setResults(all);
  }, [computeHash]);

  const computeSingle = React.useCallback(async (text) => {
    if (!text) { setResults(null); return; }
    const hash = await computeHash(text, algorithm);
    setResults({ [algorithm]: hash });
  }, [computeHash, algorithm]);

  React.useEffect(() => {
    if (liveMode && input) {
      computeAll(input);
    } else if (!input) {
      setResults(null);
    }
  }, [input, liveMode, computeAll]);

  const handleGenerate = React.useCallback(() => {
    if (liveMode) {
      computeAll(input);
    } else {
      computeSingle(input);
    }
  }, [input, liveMode, computeAll, computeSingle]);

  const copyToClipboard = React.useCallback(async (text, key) => {
    await navigator.clipboard.writeText(text);
    setCopiedKey(key);
    setTimeout(() => setCopiedKey(null), 1500);
  }, []);

  const displayAlgos = liveMode ? algorithms : (results ? Object.keys(results) : []);

  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-4">
        <textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Enter text to hash..."
          rows={3}
          className="w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm font-mono focus:ring-2 focus:ring-violet-500 focus:border-violet-500 resize-y"
        />
      </div>

      <div className="flex flex-wrap items-center gap-3 mb-4">
        <label className="flex items-center gap-1.5 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
          <input
            type="checkbox"
            checked={liveMode}
            onChange={(e) => setLiveMode(e.target.checked)}
            className="rounded border-gray-300 dark:border-gray-600"
          />
          All algorithms
        </label>

        {!liveMode && (
          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Algorithm</label>
            <select
              value={algorithm}
              onChange={(e) => setAlgorithm(e.target.value)}
              className="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1.5 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
            >
              {algorithms.map(a => <option key={a} value={a}>{a}</option>)}
            </select>
          </div>
        )}

        <div className="flex items-center gap-2">
          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">Encoding</label>
          <select
            value={encoding}
            onChange={(e) => setEncoding(e.target.value)}
            className="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-2 py-1.5 text-sm focus:ring-2 focus:ring-violet-500 focus:border-violet-500"
          >
            <option value="hex">Hex</option>
            <option value="base64">Base64</option>
          </select>
        </div>

        {!liveMode && (
          <button
            onClick={handleGenerate}
            className="rounded-md bg-violet-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-violet-700 focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
          >
            Hash
          </button>
        )}
      </div>

      {results && (
        <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 overflow-hidden">
          <div className="px-3 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700">
            <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
              {encoding === "hex" ? "Hexadecimal" : "Base64"} encoding
            </span>
          </div>
          <div className="divide-y divide-gray-200 dark:divide-gray-700">
            {displayAlgos.map(algo => results[algo] && (
              <div key={algo} className="px-3 py-2.5">
                <div className="flex items-center justify-between mb-1">
                  <span className="text-xs font-semibold text-violet-600 dark:text-violet-400">{algo}</span>
                  <button
                    onClick={() => copyToClipboard(results[algo][encoding], algo)}
                    className="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 font-medium"
                  >
                    {copiedKey === algo ? "Copied!" : "Copy"}
                  </button>
                </div>
                <code className="text-sm font-mono text-gray-900 dark:text-gray-100 break-all select-all leading-relaxed">
                  {results[algo][encoding]}
                </code>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
return HashGenerator;

Data Generator

UUID Generator