Next river buses at a pier, listed together or grouped by route.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/river-bus-arrivals-board.jsonBus Arrivals · Tube & Rail Status · Explorer · River · Colours
Next river buses at a pier, listed together or grouped by route.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/river-bus-arrivals-board.jsonBus Arrivals · Tube & Rail Status · Explorer · River · Colours
Pass RealtimePrediction[] from tfl.stopPoint.getArrivals as data. Nearby search lives under Explorer → River.
import TflClient from "tfl-ts"
const tfl = new TflClient({
appKey: process.env.TFL_APP_KEY!,
})
const stopId = "930GCAW"
const [stop, data] = await Promise.all([
tfl.stopPoint.get(stopId),
tfl.stopPoint.getArrivals({
stopPointIds: [stopId],
sortBy: "timeToStation",
}),
])Poll the pier (NaptanFerryPort, ids like 930G…). A berth (9300…) returns no predictions. towards is blank — use getNormalizedArrivals from tfl-ts 2.10, or keep getArrivals and fall through to destinationName the way this board does. The board keeps only live river-bus lines. If you pass now, use the timestamp captured with the response, not a live clock.
Tube and rail use RailArrivalsBoard. Bus uses BusArrivalsBoard. The three share row chrome and the tile rhythm, not the high-level API. Fetching stays in the app. Nearby search lives under Explorer → River.
import { RiverBusArrivalsBoard } from "@/components/tfl/arrivals/river-bus-arrivals-board"
<RiverBusArrivalsBoard
data={data}
stopName={stop.commonName}
/>The default is flat: no route headers, interleaved RB1 / RB4 / RB6 chips in soonest-first order. Waits under 30 minutes stay as Due / X min. From 30 minutes, the board shows the London clock time from expectedArrival. An empty list reads “No live departure times available.” — RB4 and Woolwich Ferry can have Good Service with no countdown feed.
Pass groupBy="route" for one section per river-bus line. Each section uses a river-blue bar. The route chip stays on the header; rows are destination and time.
<RiverBusArrivalsBoard
data={data}
stopName={stop.commonName}
groupBy="route"
/>Unattended keeps the configured height and rotates later arrivals. Rank chips replace the page count, on both flat and route-grouped boards. The first arrival stays pinned. Later slots chunk in windows of pageSize - 1; only a short final window overlaps. Frames are not swipeable. New ordering is adopted at a frame boundary; countdown updates in place.
<RiverBusArrivalsBoard
data={data}
stopName={stop.commonName}
behaviour="unattended"
/>getArrivals has no disruption field. A diverted or suspended route just disappears. Pier warnings live in stopPoint.getDisruption — the same DisruptedPoint payload as bus. Line-wide status is line.getStatus, not this board.
const disruptedPoints = await tfl.stopPoint.getDisruption({
stopPointIds: [stopId],
})Pass the result and your data through prepareBusStopDisruptions:
import { prepareBusStopDisruptions } from "@/components/tfl/arrivals/river-bus-arrivals-board"
<RiverBusArrivalsBoard
data={data}
disruptions={prepareBusStopDisruptions(disruptedPoints, data)}
stopName={stop.commonName}
/>A named route (RB1, Woolwich Ferry) attaches to that line. A pier-wide closure with no route named fans out to every river route currently in data. Warning chips sit after the pier name; hover or tap to read the text.
Route-wide status is a different fetch: line.getStatus. Pass those rows into TubeStatusBoard — do not invent a river status component. Filter to the four river-bus ids, or only the lines that serve this pier.
import { sortLinesBySeverityAndOrder } from "tfl-ts"
const fetchedAt = Date.now()
const data = sortLinesBySeverityAndOrder(
await tfl.line.getStatus({
lineIds: ["rb1", "rb4", "rb6", "woolwich-ferry"],
}),
{ now: fetchedAt },
)<TubeStatusBoard data={data} now={fetchedAt} compact hideHeader />Pass RealtimePrediction[] from tfl.stopPoint.getArrivals as data. Nearby search lives under Explorer → River.
import TflClient from "tfl-ts"
const tfl = new TflClient({
appKey: process.env.TFL_APP_KEY!,
})
const stopId = "930GCAW"
const [stop, data] = await Promise.all([
tfl.stopPoint.get(stopId),
tfl.stopPoint.getArrivals({
stopPointIds: [stopId],
sortBy: "timeToStation",
}),
])Poll the pier (NaptanFerryPort, ids like 930G…). A berth (9300…) returns no predictions. towards is blank — use getNormalizedArrivals from tfl-ts 2.10, or keep getArrivals and fall through to destinationName the way this board does. The board keeps only live river-bus lines. If you pass now, use the timestamp captured with the response, not a live clock.
Tube and rail use RailArrivalsBoard. Bus uses BusArrivalsBoard. The three share row chrome and the tile rhythm, not the high-level API. Fetching stays in the app. Nearby search lives under Explorer → River.
import { RiverBusArrivalsBoard } from "@/components/tfl/arrivals/river-bus-arrivals-board"
<RiverBusArrivalsBoard
data={data}
stopName={stop.commonName}
/>The default is flat: no route headers, interleaved RB1 / RB4 / RB6 chips in soonest-first order. Waits under 30 minutes stay as Due / X min. From 30 minutes, the board shows the London clock time from expectedArrival. An empty list reads “No live departure times available.” — RB4 and Woolwich Ferry can have Good Service with no countdown feed.
Pass groupBy="route" for one section per river-bus line. Each section uses a river-blue bar. The route chip stays on the header; rows are destination and time.
<RiverBusArrivalsBoard
data={data}
stopName={stop.commonName}
groupBy="route"
/>Unattended keeps the configured height and rotates later arrivals. Rank chips replace the page count, on both flat and route-grouped boards. The first arrival stays pinned. Later slots chunk in windows of pageSize - 1; only a short final window overlaps. Frames are not swipeable. New ordering is adopted at a frame boundary; countdown updates in place.
<RiverBusArrivalsBoard
data={data}
stopName={stop.commonName}
behaviour="unattended"
/>getArrivals has no disruption field. A diverted or suspended route just disappears. Pier warnings live in stopPoint.getDisruption — the same DisruptedPoint payload as bus. Line-wide status is line.getStatus, not this board.
const disruptedPoints = await tfl.stopPoint.getDisruption({
stopPointIds: [stopId],
})Pass the result and your data through prepareBusStopDisruptions:
import { prepareBusStopDisruptions } from "@/components/tfl/arrivals/river-bus-arrivals-board"
<RiverBusArrivalsBoard
data={data}
disruptions={prepareBusStopDisruptions(disruptedPoints, data)}
stopName={stop.commonName}
/>A named route (RB1, Woolwich Ferry) attaches to that line. A pier-wide closure with no route named fans out to every river route currently in data. Warning chips sit after the pier name; hover or tap to read the text.
Route-wide status is a different fetch: line.getStatus. Pass those rows into TubeStatusBoard — do not invent a river status component. Filter to the four river-bus ids, or only the lines that serve this pier.
import { sortLinesBySeverityAndOrder } from "tfl-ts"
const fetchedAt = Date.now()
const data = sortLinesBySeverityAndOrder(
await tfl.line.getStatus({
lineIds: ["rb1", "rb4", "rb6", "woolwich-ferry"],
}),
{ now: fetchedAt },
)<TubeStatusBoard data={data} now={fetchedAt} compact hideHeader />