import { useViewCast } from '@coinbase/onchainkit/minikit';

export default function CastReference({ castHash, castAuthor }) {
  const viewCast = useViewCast(castHash);

  return (
    <div className="cast-reference">
      <p>Referenced cast by {castAuthor}</p>
      <button onClick={viewCast}>
        View Original Cast
      </button>
    </div>
  );
}
Defined in @coinbase/onchainkit
Opens a specific Farcaster cast within the host application using the cast’s unique hash identifier.

​
Parameters

​
hash
string
required
The unique hash identifier of the cast to view. This is the cryptographic hash that uniquely identifies a cast on the Farcaster network.

​
Returns

​
viewCast
() => void
Function that opens the specified cast when called.
import { useViewCast } from '@coinbase/onchainkit/minikit';

export default function CastReference({ castHash, castAuthor }) {
  const viewCast = useViewCast(castHash);

  return (
    <div className="cast-reference">
      <p>Referenced cast by {castAuthor}</p>
      <button onClick={viewCast}>
        View Original Cast
      </button>
    </div>
  );
}

​
Usage Patterns

​
Content Attribution

Reference original casts that inspired your Mini App content:
components/AttributionFooter.tsx
const AttributionFooter = ({ originalCastHash, authorName }) => {
  const viewOriginalCast = useViewCast(originalCastHash);
  
  return (
    <footer className="content-attribution">
      <span>Inspired by cast from {authorName}</span>
      <button onClick={viewOriginalCast}>
        View Original
      </button>
    </footer>
  );
};

​
Discussion Threading

Navigate cast conversations and replies:
components/DiscussionThread.tsx
const DiscussionThread = ({ threadCasts }) => {
  return (
    <div className="discussion-thread">
      {threadCasts.map((cast, index) => (
        <ThreadItem 
          key={cast.hash}
          cast={cast}
          isRoot={index === 0}
        />
      ))}
    </div>
  );
};

const ThreadItem = ({ cast, isRoot }) => {
  const viewCast = useViewCast(cast.hash);
  
  return (
    <div className={`thread-item ${isRoot ? 'root' : 'reply'}`}>
      <span>{cast.author}: {cast.preview}</span>
      <button onClick={viewCast}>View</button>
    </div>
  );
};

​
Social Proof

Showcase community engagement with your Mini App:
components/SocialProof.tsx
const SocialProof = ({ testimonialCasts }) => {
  return (
    <section className="social-proof">
      <h3>What Users Are Saying</h3>
      {testimonialCasts.map(cast => (
        <TestimonialCard key={cast.hash} cast={cast} />
      ))}
    </section>
  );
};

const TestimonialCard = ({ cast }) => {
  const viewCast = useViewCast(cast.hash);
  
  return (
    <div className="testimonial" onClick={viewCast}>
      <blockquote>"{cast.text}"</blockquote>
      <cite>— {cast.author}</cite>
    </div>
  );
};

​
Best Practices

​
Hash Validation

Always validate cast hashes before using them:
components/SafeCastViewer.tsx
const validateCastHash = (hash) => {
  // Cast hashes are typically 40-character hexadecimal strings
  return /^0x[a-fA-F0-9]{40}$/.test(hash);
};

const SafeCastViewer = ({ castHash }) => {
  const viewCast = useViewCast(castHash);
  
  const handleViewCast = () => {
    if (validateCastHash(castHash)) {
      viewCast();
    } else {
      console.error('Invalid cast hash:', castHash);
    }
  };
  
  return (
    <button onClick={handleViewCast}>
      View Cast
    </button>
  );
};

​
Performance Optimization

Cache cast metadata to avoid repeated lookups:
components/CastLibrary.tsx
import { useMemo } from 'react';

const CastLibrary = ({ castHashes }) => {
  const sortedCasts = useMemo(() => {
    return castHashes.sort((a, b) => {
      // Sort by timestamp or other criteria
      return a.timestamp - b.timestamp;
    });
  }, [castHashes]);
  
  return (
    <div className="cast-library">
      {sortedCasts.map(cast => (
        <CastItem key={cast.hash} castHash={cast.hash} />
      ))}
    </div>
  );
};

​
User Experience

Provide context about the cast before opening:
components/ContextualCastLink.tsx
const ContextualCastLink = ({ castHash, context }) => {
  const viewCast = useViewCast(castHash);
  
  return (
    <div className="contextual-cast-link">
      <p className="context">{context}</p>
      <button onClick={viewCast} className="cast-link">
        View Related Cast →
      </button>
    </div>
  );
};
Cast hashes must be valid Farcaster cast identifiers. Invalid hashes may cause errors or unexpected behavior in the host application.
Viewing casts provides a seamless way to reference Farcaster content from your Mini App. Use this for community highlights, content attribution, and threading discussions related to your app.