useViewProfile

Navigate to Farcaster profiles from your Mini App

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.

components/ProfileButton.tsx

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.