useFeed

The useFeed hook provides a function to open the Facebook Feed dialog, which allows users to publish a story to their feed. It tracks loading and error states automatically.

Import

import { useFeed } from 'react-facebook';

Return Value

The hook returns an object with the following properties:

Property	Type	Description
feed	(options: FeedOptions) => Promise<unknown>	Function to open the Facebook Feed dialog with the given options. Returns a promise that resolves with the dialog response.
loading	boolean	Whether the feed request is in progress.
error	Error | undefined	The error from the most recent feed attempt, if any.

FeedOptions

The feed function accepts the following options:

Property	Type	Required	Description
from	string	Yes	The ID of the person posting.
to	string	Yes	The ID of the profile the post is directed at.
link	string	No	The link to include in the post. Defaults to the current page URL.
appId	string	No	The Facebook App ID. Defaults to the app ID from the provider.
picture	string	No	URL of a picture to include with the post.
source	string	No	URL of a media source (e.g. video) to include.
display	string	No	How the feed dialog is rendered (e.g. 'popup', 'page').
name	string	No	The name of the link attachment.
caption	string	No	The caption of the link attachment.
description	string	No	The description of the link attachment.
dataRef	string	No	A reference string passed through the ref parameter for tracking.
redirectURI	string	No	The URL to redirect to after the dialog closes.

Usage

function FeedComponent() {
  const { feed, loading } = useFeed();

  const handlePost = () => {
    feed({
      from: 'me',
      to: 'friend_id',
      link: 'https://example.com',
      name: 'Check this out!',
    });
  };

  return (
    <button onClick={handlePost} disabled={loading}>
      Post
    </button>
  );
}

Share a Link

A simpler example that posts a link with a preview image to the current user's own feed. Note that 'me' is a valid Facebook ID alias that always refers to the currently logged-in user.

import { useFeed } from 'react-facebook';

function ShareLinkToFeed() {
  const { feed, loading, error } = useFeed();

  const handlePost = async () => {
    try {
      const response = await feed({
        from: 'me',
        to: 'me',
        link: 'https://example.com/blog/my-article',
        picture: 'https://example.com/images/article-cover.jpg',
        name: 'My Latest Article',
        caption: 'example.com',
        description: 'Check out this article about building React apps with the Facebook SDK.',
      });
      console.log('Feed dialog response:', response);
    } catch (err) {
      console.error('Feed post failed:', err);
    }
  };

  return (
    <div className="flex flex-col items-start gap-2">
      <button
        onClick={handlePost}
        disabled={loading}
        className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
      >
        {loading ? 'Posting...' : 'Share to your Feed'}
      </button>

      {error && <p className="text-sm text-red-600">Error: {error.message}</p>}
    </div>
  );
}