Skip to main content
Defined in @coinbase/onchainkit
Opens Farcaster user profiles within the host application. Defaults to the current user’s profile if no FID is specified.

​
Parameters

​
fid
string
The Farcaster ID of the profile to view. If not provided, defaults to the current user’s FID from the MiniKit context.

​
Returns

​
viewProfile
() => void
Function that opens the specified Farcaster profile when called.
import { useViewProfile } from '@coinbase/onchainkit/minikit';

export default function ProfileButton() {
  const viewProfile = useViewProfile(); // Uses current user's FID

  return (
    <button onClick={viewProfile}>
      View My Profile
    </button>
  );
}

​
Usage Patterns

​
User Discovery

Enable users to explore profiles of other participants:
components/ProfileList.tsx
const ProfileList = ({ users }) => {
  return (
    <div className="user-list">
      {users.map(user => (
        <UserProfileCard 
          key={user.fid}
          fid={user.fid}
          name={user.name}
        />
      ))}
    </div>
  );
};

const UserProfileCard = ({ fid, name }) => {
  const viewProfile = useViewProfile(fid);
  
  return (
    <div onClick={viewProfile} className="profile-card">
      <h4>{name}</h4>
      <span>FID: {fid}</span>
    </div>
  );
};

​
Social Gaming

Connect players in multiplayer experiences:
components/GameLobby.tsx
const GameLobby = ({ players }) => {
  return (
    <div className="game-lobby">
      <h3>Players in Game</h3>
      {players.map(player => (
        <PlayerChip key={player.fid} player={player} />
      ))}
    </div>
  );
};

const PlayerChip = ({ player }) => {
  const viewProfile = useViewProfile(player.fid);
  
  return (
    <div className="player-chip" onClick={viewProfile}>
      {player.username}
    </div>
  );
};

​
Creator Attribution

Link to content creators and collaborators:
components/ContentAttribution.tsx
const ContentAttribution = ({ creator }) => {
  const viewCreatorProfile = useViewProfile(creator.fid);
  
  return (
    <div className="attribution">
      <span>Created by</span>
      <button 
        onClick={viewCreatorProfile}
        className="creator-link"
      >
        {creator.name}
      </button>
    </div>
  );
};

​
Best Practices

​
User Experience

  • Clear call-to-action: Use descriptive button text like “View Profile” or user names
  • Visual feedback: Indicate clickable profile elements with appropriate styling
  • Context awareness: Show relevant profile actions based on the user’s relationship

​
Performance Optimization

  • Memoize profile handlers: Use the same hook instance for the same FID
  • Batch profile data: Load profile information efficiently when displaying multiple users
components/ProfileActions.tsx
import { useMemo } from 'react';

const ProfileActions = ({ userFid }) => {
  const viewProfile = useViewProfile(userFid);
  
  // Memoize to avoid recreating the handler
  const handleProfileView = useMemo(() => viewProfile, [viewProfile]);
  
  return (
    <button onClick={handleProfileView}>
      View Profile
    </button>
  );
};

​
Accessibility

  • Keyboard navigation: Ensure profile links are keyboard accessible
  • Screen reader support: Use semantic HTML and ARIA labels
  • Focus management: Handle focus appropriately when returning from profile views
components/AccessibleProfileLink.tsx
const AccessibleProfileLink = ({ fid, userName }) => {
  const viewProfile = useViewProfile(fid);
  
  return (
    <button 
      onClick={viewProfile}
      aria-label={`View ${userName}'s Farcaster profile`}
    >
      {userName}
    </button>
  );
};
Profile viewing behavior may vary between Farcaster clients. In Base App, profiles open within the app context. In other clients, the experience may differ based on their implementation.
Always validate FIDs before passing them to useViewProfile. Invalid FIDs may cause errors or unexpected behavior in the host application.