Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA news feed that refreshes on pull or on the Refresh button, prepends new items with a "2 new stories" announcement and keeps the reading position when nothing changed. Use this when a phone feed has fresh content on a server and people expect to pull to update it.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when a phone feed has fresh content on a server and people expect to pull to update it.
Do not use it for content that updates by itself or screens without their own scroll area.
It composes @tealmac/pull-to-refresh, which the CLI installs for you.
import { PullRefreshFeed } from "@/components/pull-refresh-feed"<div className="w-full max-w-sm">
<PullRefreshFeed
initial={[
{ id: "a", title: "Harbour reopens after repairs" },
{ id: "b", title: "Market moves to Sundays" },
]}
load={async () => {
calls.current += 1
await new Promise((resolve) => setTimeout(resolve, 20))
if (calls.current === 1)
return [
{ id: "n1", title: "New bridge approved" },
{ id: "n2", title: "Library extends hours" },
{ id: "a", title: "Harbour reopens after repairs" },
]
return []
}}
/>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
initial | Story[] | required | { id, title } stories, newest first. |
load | () => Promise<Story[]> | required | Fetch the newest stories. |
The pattern ships with a Testing Library test (pull-refresh-feed.test.tsx) that drives it through roles and the keyboard.