> For the complete documentation index, see [llms.txt](https://docs.feedspring.com/introduction/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.feedspring.com/introduction/delivery-methods/react-components.md).

# React Components

Use FeedSpring in React by copying a component into your project and rendering your feed data directly in your app.

This is a good option if you want more control than attributes, while still starting from a ready-made layout.

#### When to use React

Use React components if you are:

* Building with React or Next.js
* Comfortable editing JSX and CSS
* Creating custom layouts inside your frontend
* Looking for more flexibility than attributes

If you want a no-code or visual setup, use Framer components or attributes instead. If you want to render feeds completely from scratch, use the API.

#### How it works

The React component fetches your feed from FeedSpring and renders the results in your app.

You provide a feed ID, the component hits the feed endpoint, and the JSON comes back ready to render. This is the same data as the API, just wrapped in a working component so you do not have to write the fetch and render logic yourself.

#### What you control

Because the component lives in your codebase, every part of it is editable:

* The JSX structure and layout
* Number of items displayed
* Styling and responsive behaviour
* Loading and empty states
* How each field is rendered

#### Example

A minimal Instagram grid, based on the same pattern shipped in the components library:

jsx

```jsx
function InstagramGrid({ feedId, posts = 8 }) {
  const { items, loading } = useFeed(feedId, posts)

  return (
    <section>
      <div className="grid">
        {loading
          ? Array.from({ length: posts }, (_, i) => <div key={i} className="post" />)
          : items.map((item, i) => (
              <a key={item.id ?? i} href={item.permalink} target="_blank" rel="noopener noreferrer">
                <img src={item.mediaUrl} alt="" />
                <p>{item.caption ?? ''}</p>
              </a>
            ))
        }
      </div>
    </section>
  )
}
```

The `useFeed` hook is a small wrapper around a `fetch` to the FeedSpring feed endpoint. You can keep it as a utility, replace it with your own data layer, or move the fetch server-side in a framework like Next.js.

#### Field names in React

The React component works with the **raw JSON field names** from the feed data. These are different from the short `feed-field` names used in the attributes delivery method. For example:

| In React              | In Attributes           |
| --------------------- | ----------------------- |
| `item.mediaUrl`       | `feed-field="img"`      |
| `item.permalink`      | `feed-field="link"`     |
| `item.caption`        | `feed-field="caption"`  |
| `feed.extra.avatar`   | `feed-field="avatar"`   |
| `feed.extra.username` | `feed-field="username"` |

The data is the same, the access pattern is just React-native. See the Posts & fields page for the full mapping across delivery methods.

#### Post fields used in the Instagram component

The default Instagram grid uses the following data from each post:

* `item.mediaUrl` — the post image
* `item.permalink` — link to the original post on Instagram
* `item.caption` — the post caption

#### Profile fields used in the Instagram component

For account-level elements like a header, the component reads from `feed.extra`:

* `feed.extra.avatar` — profile image
* `feed.extra.username` — Instagram handle

Different feed sources (Google Reviews, TikTok, Dribbble) expose different fields. See the Feeds reference for a full list.

#### Notes

* The current components are **copy-paste**, not an NPM package. You own the code and can edit it freely.
* Item limits are applied **client-side** — the component fetches the feed and then slices to the requested count. For server-side limiting, use the API directly with a `limit` parameter.
* Feeds are fetched on the client by default. For server-side rendering or caching, lift the fetch into your framework's data layer.
* The pattern works for any FeedSpring feed type. Swap the Instagram component for Google Reviews, TikTok, or Dribbble variants from the Components library.

#### When to use the API instead

Use the API directly if you want to:

* Fetch feed data yourself and transform or cache it
* Render from scratch without starting from a component
* Use the data outside React, for example in a native app or backend
* Apply server-side filtering, caching, or pagination

#### Next steps

* View available fields for each feed type
* Understand how feeds and fields are structured
* Explore the API for advanced usage


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.feedspring.com/introduction/delivery-methods/react-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.