annotating a stateless function component in flowtype

quote.js

/* @flow */

import React from 'react'

type QuoteProps = {
  message: string,
  quote: string,
  name: string,
  photoUrl: string,
  photoAlt: string
}

export default ({
  message,
  quote,
  name,
  photoUrl,
  photoAlt
}: QuoteProps): ReactElement => (
  <div className='Quote'>
    <div className='Quote-message'>
      {message}
    </div>
    <div className='Quote-quote'>
      <q>{quote}</q>
      <div>— <cite>{name}</cite></div>
    </div>
    <div className='Quote-image-container'>
      <img
        className='Quote-image'
        src={photoUrl}
        alt={photoAlt}
      />
    </div>
  </div>
)

👍

For the record this is out of date now and visitors should look elsewhere. Potential good starting point here: https://medium.com/flow-type/even-better-support-for-react-in-flow-25b0a3485627

Another starting point: https://flow.org/en/docs/react/components/#toc-stateless-functional-components