@blockfact/react-facti

React component for displaying and verifying .facti files with blockchain verification.

Installation

npm install @blockfact/react-facti
# or
yarn add @blockfact/react-facti

Usage

Basic Display

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

function App() {
  return (
    <FactiImage 
      factiUrl="https://gateway.pinata.cloud/ipfs/QmXXX"
      alt="Verified Content"
    />
  );
}

With Metadata

<FactiImage 
  factiUrl="https://gateway.pinata.cloud/ipfs/QmXXX"
  showMetadata={true}
  onMetadataLoad={(metadata) => {
    console.log('Transaction:', metadata.tx_hash);
  }}
/>

Custom Styling

<FactiImage 
  factiUrl="https://gateway.pinata.cloud/ipfs/QmXXX"
  className="my-image"
  style={{ maxWidth: '500px', margin: '20px auto' }}
/>

Parse Manually

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

function CustomComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    parseFacTi('https://gateway.pinata.cloud/ipfs/QmXXX')
      .then(setData);
  }, []);

  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <img src={data.imageUrl} alt="Content" />
      <p>Owner: {data.metadata.wallet}</p>
      <p>Location: {data.metadata.latitude}, {data.metadata.longitude}</p>
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | factiUrl | string | required | URL to .facti file | | alt | string | 'BlockFact Content' | Image alt text | | className | string | '' | CSS class name | | style | object | {} | Inline styles | | showMetadata | boolean | false | Show metadata below image | | onMetadataLoad | function | null | Callback when metadata loads | | onError | function | null | Callback on error |

API

parseFacTi(factiUrl)

Parse a .facti file and extract image + metadata.

Returns:

{
  imageUrl: "blob:...",  // Blob URL for image
  metadata: {
    tx_hash: "0x...",
    wallet: "0x...",
    timestamp: "2026-02-26T13:20:00Z",
    latitude: 40.7128,
    longitude: -74.0060,
    // ... other fields
  }
}

TypeScript

Full TypeScript support included:

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

function App() {
  const handleLoad = (metadata: FactiMetadata) => {
    console.log(metadata.tx_hash);
  };

  return <FactiImage factiUrl="..." onMetadataLoad={handleLoad} />;
}

Features

• ✅ Zero dependencies (only React peer dependency)
• ✅ TypeScript support
• ✅ Automatic image extraction from .facti files
• ✅ Blockchain verification links
• ✅ GPS coordinates with Google Maps links
• ✅ Loading and error states
• ✅ Memory cleanup (revokes blob URLs)

Examples

Gallery

const images = [
  'https://gateway.pinata.cloud/ipfs/QmAAA',
  'https://gateway.pinata.cloud/ipfs/QmBBB',
  'https://gateway.pinata.cloud/ipfs/QmCCC',
];

function Gallery() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
      {images.map(url => (
        <FactiImage key={url} factiUrl={url} showMetadata={true} />
      ))}
    </div>
  );
}

With Error Handling

function SafeFactiImage({ factiUrl }) {
  const [error, setError] = useState(null);

  if (error) {
    return <div>Failed to load: {error.message}</div>;
  }

  return (
    <FactiImage 
      factiUrl={factiUrl}
      onError={setError}
    />
  );
}

License

MIT

Links

• npm
• GitHub
• BlockFact