import * as React from 'react'

import { Image } from '../../../models/diff'

interface IRenderImageOptions {
  readonly style?: {}
  readonly onLoad?: (e: React.SyntheticEvent<HTMLImageElement>) => void
}

export function renderImage(
  image: Image | undefined,
  options?: IRenderImageOptions
) {
  if (!image) {
    return null
  }

  const imageSource = `data:${image.mediaType};base64,${image.contents}`

  return <img src={imageSource} {...options} />
}

import * as React from 'react'

import { Image } from '../../../models/diff'

export function renderImage(
  image: Image | undefined,
  props?: {
    style?: {}
    onLoad?: (e: React.SyntheticEvent<HTMLImageElement>) => void
  }
) {
  if (!image) {
    return null
  }

  const imageSource = `data:${image.mediaType};base64,${image.contents}`

  return <img src={imageSource} {...props} />
}

--- 
+++ 
@@ -2,12 +2,14 @@
 
 import { Image } from '../../../models/diff'
 
+interface IRenderImageOptions {
+  readonly style?: {}
+  readonly onLoad?: (e: React.SyntheticEvent<HTMLImageElement>) => void
+}
+
 export function renderImage(
   image: Image | undefined,
-  props?: {
-    style?: {}
-    onLoad?: (e: React.SyntheticEvent<HTMLImageElement>) => void
-  }
+  options?: IRenderImageOptions
 ) {
   if (!image) {
     return null
@@ -15,5 +17,5 @@
 
   const imageSource = `data:${image.mediaType};base64,${image.contents}`
 
-  return <img src={imageSource} {...props} />
+  return <img src={imageSource} {...options} />
 }
Split these out into their own type
