React Web SDK

Display and verify .facti files in React web applications

Installation

Usage

Display .facti File

import FactiImage from '@blockfact/react-facti';

function App() {
  return (
    <FactiImage 
      factiUrl="https://ipfs.io/ipfs/bafybei..."
      alt="Verified content"
      showMetadata={true}
    />
  );
}

Parse .facti File

import { parseFacTi } from '@blockfact/react-facti';

const { imageUrl, metadata } = await parseFacTi(factiUrl);

console.log('Transaction:', metadata.tx_hash);
console.log('Creator:', metadata.wallet);
console.log('Timestamp:', metadata.timestamp);

API Reference

FactiImage Component

parseFacTi()

parseFacTi(factiUrl: string): Promise<{
  imageUrl: string,
  metadata: {
    tx_hash: string,
    wallet: string,
    timestamp: string,
    latitude?: number,
    longitude?: number,
    mime: string
  }
}>

Complete Example

import React, { useState } from 'react';
import FactiImage, { parseFacTi } from '@blockfact/react-facti';

function FactiViewer() {
  const [factiUrl, setFactiUrl] = useState('');
  const [metadata, setMetadata] = useState(null);

  const handleLoad = async (url) => {
    const { metadata } = await parseFacTi(url);
    setMetadata(metadata);
  };

  return (
    <div>
      <input 
        type="text"
        placeholder="Enter .facti URL"
        value={factiUrl}
        onChange={(e) => setFactiUrl(e.target.value)}
      />

      {factiUrl && (
        <FactiImage 
          factiUrl={factiUrl}
          showMetadata={true}
          onMetadataLoad={handleLoad}
        />
      )}

      {metadata && (
        <div>
          <h3>Blockchain Verification</h3>
          <a href={`https://sepolia.voyager.online/tx/${metadata.tx_hash}`}>
            View on Explorer
          </a>
        </div>
      )}
    </div>
  );
}

Browser Extension

Install the BlockFact Chrome extension to view .facti files directly in your browser: