Endpoint List
API routes, grouped and filterable. The method badge is fixed-width because a route table is scanned down the method column, and a ragged left edge makes that scan impossible.
src/components/ui/endpoint-list.tsxAbout
From the component's own source, where it was written.
API routes, grouped and filterable.
The method badge is fixed-width and colour-coded. A route table is scanned down the method column, and a ragged left edge where GET and DELETE differ in width makes that scan impossible.
Deprecated routes are struck through but kept. Removing them from the list is how a client keeps calling one for another year — the point of marking it is that someone sees it.
Paths are matched on a plain substring including the method, so "post /users" filters the way people actually type.
Install
npx astralyx-ui add endpoint-list
Usage
import { EndpointList } from '@/components/ui/endpoint-list'
<EndpointList endpoints={endpoints} onSelect={open} />Composer
Change the props and the source below follows.
Users
Accounts
<EndpointList endpoints={endpoints} onSelect={open} />Examples
A REST surface
<EndpointList endpoints={endpoints} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
EndpointList
Extends Omit<ComponentProps<'div'>, 'onSelect'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| endpoints | Endpoint[] | required | { id, method, path, summary?, group?, auth?, deprecated?, status? }. |
| searchable | boolean | true | — |
| onSelect | (id: string) => void | — | — |
| selected | string | — | — |
| searchPlaceholder | string | 'Filter routes' | — |
| searchLabel | string | 'Filter routes' | — |
| emptyMessage | ReactNode | 'No routes match.' | — |
| authLabel | string | 'requires auth' | Accessible name for the lock icon. |
| deprecatedLabel | ReactNode | 'deprecated' | — |
Types
Endpoint
API routes, grouped and filterable.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| method | string | — |
| path | string | — |
| summary? | ReactNode | — |
| group? | string | — |
| auth? | boolean | Draws a lock. Whether a route needs credentials is the second thing anyone looks for. |
| deprecated? | boolean | Struck through but kept. Removing a deprecated route from the list is how a client keeps calling it for another year. |
| status? | number | Last observed status, if you have one. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| filtering | method + path | The method is part of the haystack, so "post /users" filters the way people type. |