Token Parts Input

Составной токен — несколько полей (домен·токен), склеиваемых в одну строку «A:B» только наружу.

Поддомен

Токен

Склеено наружу: —

"use client";

import { useState } from "react";
import { TokenPartsInput } from "@/components/ui/token-parts-input";

const parts = [
  {
    label: "Поддомен",
    placeholder: "mycompany",
    normalize: (v: string) =>
      v
        .replace(/^https?:\/\//i, "")
        .replace(/\/.*$/, "")
        .trim(),
  },
  { label: "Токен", placeholder: "долгоживущий токен доступа", secret: true },
];

export default function Particle() {
  const [joined, setJoined] = useState("");

  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-4 p-4">
      <TokenPartsInput onChange={setJoined} parts={parts} />
      <p className="text-muted-foreground text-xs">
        Склеено наружу:{" "}
        <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-2xs text-foreground">
          {joined || "—"}
        </code>
      </p>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/token-parts-input

Использование

import { TokenPartsInput } from "@/components/ui/token-parts-input";
 
<TokenPartsInput
  parts={[
    { label: "Поддомен", placeholder: "mycompany", normalize: stripUrl },
    { label: "Токен", placeholder: "токен доступа", secret: true },
  ]}
  onChange={(joined) => setToken(joined)}
/>

Часть коннекторов авторизуется парой/тройкой значений (Ozon — Client-Id + Api-Key). Каждый параметр — отдельное поле; наружу отдаётся одна строка "A:B(:C)". Части хранятся в собственном стейте и НЕ пере-дробятся на каждый рендер (вставка значения с : остаётся в своём поле). Для смены коннектора — задайте новый key, чтобы поля сбросились.

API

Prop	Тип	Описание
`parts`	`TokenPart[]`	Описание полей: `{ label, placeholder?, secret?, normalize? }`.
`initialToken`	`string`	Стартовое склеенное значение (читается один раз).
`onChange`	`(joined: string) => void`	Склеенная строка `"A:B"` при изменении.
`disabled`	`boolean`	Блокировка полей.
`autoFocus`	`boolean`	Автофокус на первом поле.

На этой странице

Установка Использование API