React-catbow-scrollview

ScrollView is using Intersection Observer API

npm

 $ npm i react-catbow-scrollview

Option

const option = {
	imgUrl: './images/004/', //  Address before image
	videoImageCount: 754, // Total-number-of-images
	startNum: 10000, // Image-path-start-number
	extension: '.jpg', // Available-with-any-image-extension
	scrollAreaY: 50000, // scrollArea,
	top: 20 // top: 20px
	viewPort: {
		// all-imgTag-styles-available
		width: '500px',
	},
};
// Render
<ScollView option={option} viewItem={<Components />} setEjectRatio={setEjectRatio}/>;
// viewItem is optional
// you can render Components in ScollView
// setEjectRatio is optional
// you can get ImageCount ratio

❉❉ The image address path must have consecutive numbers.

❉❉ If you host an image with S3, you can receive it with consecutive numbers.

❉❉ Or, you just need to have an image inside the project.

option	discription	type
imgUrl	Address before image	String
videoImageCount	Total-number-of-images	String
startNum	Image-path-start-number	Number
extension	Available-with-any-image-extension	String
scrollAreaY	scrollArea	Number
viewPort?	img-style	Object
top?	css style top	Number
viewItem?	Jsx components can be rendered in ScrollVIew	JSX Components
setEjectRatio?	you can hooks From the parent component and get ImageCount Ratio(return number)	setState => number

How to use viewItem option

you can try Components styling,

You must use css 'position: absolute' at the top of Components

function Hello() {
	return (
		<div style={{ top: '10px', position: 'absolute' }}>
			<h1 style={{ fontSize: '5rem' }}>hello world</h1>
			<h1 style={{ marginTop: '600px', fontSize: '5rem' }}>
				React-catbow-ScrollView
			</h1>
		</div>
	);
}

function App() {
	const option = {
		videoImageCount: 754,
		imgUrl: './images/004/',
		startNum: 10000,
		extension: '.jpg',
		scrollAreaY: 4970,
		top: 30,
		viewPort: {
			width: '550px',
			height: '550px',
			margin: '100px 100px',
			borderRadius: '9999px',
		},
	};
	return (
		<ScrollView
			option={option}
			viewItem={<Hello />}
		/>
	);
}

Test Img Zip

Catbow Docs

Issues can be requested using labels.

ex) bug, documentation, duplicate, enhancement, help wanted, invalid, question, wontfix

You can convert a video into images here => catbow-convert