react-tiff

A React component for viewing TIFF images.

Features

• Supports multi-page TIFF images
• Supports TIFF images with multiple channels (e.g. RGB, RGBA, CMYK)
• Supports TIFF images with multiple resolutions (e.g. 1x, 2x, 4x)
• Supports TIFF images with multiple tiles
• Supports TIFF images with multiple strips
• Supports TIFF images with multiple samples per pixel (e.g. 1, 2, 3, 4)
• Supports TIFF images with multiple bits per sample (e.g. 1, 2, 4, 8, 16, 32)
• Supports TIFF images with multiple photometric interpretations (e.g. min-is-black, min-is-white, RGB, palette color, transparency mask, CMYK, YCbCr, CIELab)
• Support you can print out tiff images.
• Support you can zoom in and out tiff images.
• Support you can get the total number of pages on load of the document and handle pagination programmatically.
• Support onLoad callback when TIFF file has been loaded.
• Support currentPage prop to display specific page programmatically.
• Full TypeScript support with complete type definitions.

Install

npm install --save react-tiff

yarn add react-tiff

Usage

import React from 'react'

import { TIFFViewer } from 'react-tiff'
import 'react-tiff/dist/index.css'
import tiffFile from './images/multipage.tiff'

const App = () => {
  const handleDocumentLoad = (totalPages) => {
    console.log(`Document loaded with ${totalPages} pages`)
  }

  const handleLoad = () => {
    console.log('TIFF file has been loaded')
  }

  return (
    <TIFFViewer
      tiff={tiffFile}
      lang='en' // en | de | fr | es | tr | ja | zh | ru | ar | hi
      paginate='ltr' // bottom | ltr
      buttonColor='#141414' // pagination button color
      currentPage={1} // current page to display
      onDocumentLoad={handleDocumentLoad} // callback when document loads
      onLoad={handleLoad} // callback when TIFF file loads
      printable // print button visible
      zoomable // zoom in and out button visible
    />
  )
}

export default App

TypeScript Usage

import React from 'react'
import { TIFFViewer } from 'react-tiff'
import 'react-tiff/dist/index.css'
import tiffFile from './images/multipage.tiff'

const App: React.FC = () => {
  const handleDocumentLoad = (totalPages: number) => {
    console.log(`Document loaded with ${totalPages} pages`)
  }

  const handleLoad = () => {
    console.log('TIFF file has been loaded')
  }

  return (
    <TIFFViewer
      tiff={tiffFile}
      lang='en'
      paginate='ltr'
      buttonColor='#141414'
      currentPage={1}
      onDocumentLoad={handleDocumentLoad}
      onLoad={handleLoad}
      printable
      zoomable
    />
  )
}

export default App

Live

Demo

Extras

Made with create-react-library

License

MIT © harundogdu