import React from 'react'
import { useLazyImages } from 'react-use-lazy-images'
const STYLES = {
height: "5000px",
margin: '0 auto',
width: '100%'
}
export function OctoCats() {
const ref = useLazyImages<HTMLDivElement>({
placeholderSrc:
"https://octodex.github.com/images/vinyltocat.png"
});
return (
<div ref={ref} style={STYLES}>
<h1>React Use Lazy Images</h1>
<img
alt="Vinyltocat"
src="https://octodex.github.com/images/surftocat.png"
/>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<img
alt="Surftocat"
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"
/>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<img
alt="Justicetocat"
src="https://octodex.github.com/images/justicetocat.jpg"
/>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<img
alt="Private Investocat"
src="https://octodex.github.com/images/privateinvestocat.jpg"
/>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<img
alt="Robotocat"
src="https://octodex.github.com/images/Robotocat.png"
/>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<h2>Some Elements Between</h2>
<img
alt="Spidertocat"
src="https://octodex.github.com/images/spidertocat.png"
/>
</div>
);
}