react-catbow-scrollview

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.

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