Endpoint Form

PreviousNext

Create and edit endpoints: URL, description, subscriptions, and rate limit.

Comma-separated event types; * subscribes to everything.

"use client";

import { useState } from "react";

Installation

pnpm dlx shadcn@latest add @repost/endpoint-form

Installs this item, every component it depends on, and the npm packages listed below.

Usage

This component is presentational: it renders what you pass it and calls back on interaction. In a live dashboard the data comes from useCreateEndpoint() / useUpdateEndpoint() (@repost/portal-react), but any data of the same shape works.

components/endpoint-form-demo.tsx
"use client";

import { useState } from "react";
import { EndpointForm, type EndpointFormValues } from "@/components/endpoint-form";

export function EndpointFormDemo() {
  const [submitted, setSubmitted] = useState<EndpointFormValues | null>(null);

  return (
    <div className="mx-auto flex max-w-md flex-col gap-3">
      <EndpointForm onSubmit={setSubmitted} submitLabel="Create endpoint" />
      {submitted && (
        <pre className="overflow-auto rounded-md bg-muted/50 p-3 font-mono text-xs">{JSON.stringify(submitted, null, 2)}</pre>
      )}
    </div>
  );
}

Props

PropTypeDescription
initialValuesPartial<EndpointFormValues>Prefill for editing.
onSubmit(values) => voidCalled with validated values.
isSubmittingbooleanDisables the submit button.
error`stringnull`