Fixed Size List をレスポンシブで作成します。
前回は以下を参照して下さい。
やりたいこと
jsonデータからサムネイルパス一覧を取得して、サムネイルを表示します。
実装
imgPathList.json (インプットデータ)
{
"imgPathList" : [
"https://dennie.tokyo/norway/img/photos/P1014659.jpg",
"https://dennie.tokyo/norway/img/photos/P1014660.jpg",
"https://dennie.tokyo/norway/img/photos/P1014661.jpg",
"https://dennie.tokyo/norway/img/photos/P1014662.jpg"
]
}Appコンポーネント
import './App.css';
import React, { useLayoutEffect , useState} from 'react';
import {FixedSizeList} from 'react-window';
import ImgPathList from './imgPathList.json';
function App() {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
// サムネイルの縦の長さ
const orgItemSizeHigt = 576;
// サムネイルの横の長さ
const orgItemSizeWith = 1024;
// リストの幅(0〜1で設定する。ex)0.8 は幅80%)
const listWidth = 0.8;
// リストアイテムの高さ
let listItemHeight = (width * listWidth) * (orgItemSizeHigt / orgItemSizeWith);
const resize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}
useLayoutEffect(()=>{
window.addEventListener("resize", resize);
resize();
},[])
const RenderItem = ({index, style}) => {
return (
<div style={style}>
<img src={ImgPathList.imgPathList[index]} width= {"100%"}/>
</div>
);
}
return (
<FixedSizeList
height={height}
width={width * listWidth}
itemSize={listItemHeight}
itemCount={ImgPathList.imgPathList.length}
>
{RenderItem}
</FixedSizeList>
);
}
export default App;最後に
特にありません。