https://github.com/illright/react-feed
https://github.com/illright/react-feed
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/illright/react-feed
- Owner: illright
- License: isc
- Created: 2023-07-02T22:28:00.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T20:03:23.000Z (over 2 years ago)
- Last Synced: 2025-01-30T23:14:45.757Z (over 1 year ago)
- Language: TypeScript
- Size: 56.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @illright/react-feed
_Your list of cards could do with a bit of keyboard navigation, eh?_
The headless implementation of the [ARIA feed pattern](https://www.w3.org/WAI/ARIA/apg/patterns/feed/) for React.
## Installation
```bash
pnpm add @illright/react-feed
```
Type definitions are built in 😎.
Minimum requirements for React? The one that has hooks (16.8+), that's it.
I don't use pnpm
What do you mean "I don't use [`pnpm`](https://pnpm.io)"? It's so much faster! Alright, here's your `npm` command:
```bash
npm install --save @illright/react-feed
```
## Usage
It exports two components:
* `Feed`, the list of cards
Props:
* `aria-labelledby?: string`, the ID of the element that labels the feed. This element should be outside the feed, like a sibling.
* `aria-busy?: boolean`, whether the feed is being updated with more articles.
* `Article`, each individual card
Props:
* **Required**: `aria-labelledby: string`, the ID of the element that labels the article. This element should be inside the article.
* `aria-describedby?: string`, the ID of the element that describes the article. It should be inside the article.
Here's an example (see the [demo](./demo) folder for a complete one):
```tsx
import { useId } from "react"; // This is from React 18, but you don't have to use it
import { Feed, Article } from "react-feed";
// ↓ This is a hook to fetch data, e.g. from React Query
import { useArticles } from "./data";
export function App() {
const idBase = useId();
const { data: articles, fetchNextPage, isFetching } = useArticles();
return (
{articles.map((article) => (
{article.title}
{article.description}
))}
// ↓ Note that the "load more" button should be an article too.
fetchNextPage()}
>
Load more posts
);
}
```
### Styling
The `` component renders a `
` with no styling, you can pass any other props to it, for example, a class to style it. Similarly, the `` renders a `` with no styling.
Therefore, styling with Tailwind CSS, plain CSS, or any other CSS-in-JS library is easy. Styling with styled-components will be supported in future versions.
## License
The source code of this project is distributed under the terms of the ISC license. It's like MIT, but better. [Click here](https://choosealicense.com/licenses/isc/) to learn what that means.