kenjuの日記

About Programming, Mathematics and Security

React画像用ライブラリ"react-simple-image"

github.com

なぜ作ったか

  • srcSet, mediaConditionなどを宣言的に書けるReact Componentsが欲しかったから
  • React Components libraryを作成し公開するまでの一連の流れを経験するため

特徴

srcSetに指定する、pixel descriptorもしくはwidth descriptorを宣言的に書ける。

width descriptorの例:

以下の宣言に対して

  • srcset="example-small.png 360w,example-middle.png 720w,example-large.png 1200w"
  • sizes="(max-width: 30em) 100vw,(max-width: 50em) 50vw,calc(33vw - 100px)"

を持つ<img/>が出力される。

<Image
  alt='example'
  className='additional-className'
  src='example-small.png',
  srcSet={{
    '360w': 'example-small.png',
    '720w': 'example-middle.png',
    '1200w': 'example-large.png',
  }},
  sizes={[
    {size: '100vw', mediaCondition: '(max-width: 30em)'},
    {size: '50vw', mediaCondition: '(max-width: 50em)'},
    {size: 'calc(33vw - 100px)'},
  ]},
  />

pixel descriptorの例:

以下の宣言に対して

  • srcset="example.png 1x,example@2x.png 2x"

を持つ<img/>が出力される。

<Image
  alt='example'
  className='additional-className'
  src='example.png',
  srcSet={{
    '1x': 'example.png',
    '2x': 'example@2x.png',
  }},
  />