react-catbow-scrollview

해당 포스터는 react-catbow-scrollview 사용법을 알리기 위해 작성 되었습니다.

1. JSDoc으로 설명하는 친절한 코드 설명

ScrollView 코드에디터에서 옵션 설정 방법을 알 수 있게 지원 해줍니다.
컴포넌트에 마우스를 올려두기만 하면 됩니다.!!

하지만 그래도 잘 모르겠다면 react-catbow-scrollview 레파지토리에서 README.md의 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 />} />;
// viewItem is optional
// you can render Components in ScollView

2. position: sticky

Scrollview 컴포넌트는 스크롤을 해도 화면에서 사라지면 안되기 때문에 css position: sticky 속성을 가지고 있습니다.

그러므로 다음의 상황들을 염두해보고 스타일링해야 됩니다.

A. pull 스크린이 아니면 주변을 꾸며주자, 아니면 아래처럼된다.!!

풀스크린일때

const option = {
		videoImageCount: 754,
		imgUrl: './004/',
		startNum: 10000,
		extension: '.jpg',
		scrollAreaY: 6000,
		viewPort: {
			width: '100vw',
			height: '100vh',
		},
	};

2. 스크롤 영역 scrollAreaY는, 재생길이를 늘려줍니다.

사용자마다 원하는 비율이 있을텐데 100단위로 늘려보면서 테스트 해보면 원하는 비율을 얻을 수 있을 것입니다.

const option = {
		videoImageCount: 754,
		imgUrl: './004/',
		startNum: 10000,
		extension: '.jpg',
		scrollAreaY: 100000, // 10만으로 하니 스크롤하기 힘들다..
		viewPort: {
			width: '100vw',
			height: '100vh',
		},
	};

3. viewPort는 img Tag 그 자체입니다.

border 속성으로 원을 만들어 본 예시입니다.

const option = {
	videoImageCount: 754,
	imgUrl: './004/',
	startNum: 10000,
	extension: '.jpg',
	scrollAreaY: 10000,
	viewPort: { //  img tag!!
		width: '500px',
		height: '500px',
		margin: '100px 100px',
		borderRadius: '9999px',
	},
};

4. viewItem은 jsx를 내부에서 렌더해주는 특별한 옵션입니다.

해당 옵션은 고민을 많이 했습니다.
라이브러리를 만들때, 사용하기 쉽게, 접근이 쉽게 만드는걸 목표로 했는데,
해당 옵션은 라이브러리를 커스텀해서 사용할 수 있는 선택지를 주면서,
동시에 행동을 강제하는 느낌이 들것 같았습니다.. (하지만 넣었습니다 !!)

간단하게 hello 라는 문구를 넣어 보았습니다.

2가지 규칙만 지키면된다.

1. 넘겨질 컴포넌트는 최상위에 css position: absolute 속성을 꼭 넣어줍니다.
2. JSX문법으로 넘겨야합니다. viewItem으로 prop을 넘기면 컴포넌트 내부에서 렌더링 해주는 것입니다.

// ScrollView 안에 렌더링할 컴포넌트
function Component() {
	return (
		<div style={{ position: 'absolute', top: '95px', left: '75px' }}>
			<div style={{ fontSize: '150px' }}>hello</div>
		</div>
	);
}


function App() {
	const option = {
		videoImageCount: 754,
		imgUrl: './004/',
		startNum: 10000,
		extension: '.jpg',
		scrollAreaY: 10000,
		// top: 30,  => css top property
		viewPort: {
			width: '500px',
			height: '500px',
			margin: '100px 500px',
			borderRadius: '9999px',
		},
	};

	return (
		<>
			<div
				className='App'
				style={{ height: '1000px', background: 'skyblue' }}
			/>
											// 넘길때는 이렇게!
			<ScrollView option={option} viewItem={<Component />} />
			<div
				className='App'
				style={{ height: '1000px', background: 'skyblue' }}
			/>
		</>
	);
}

5. option.top

4번의 예시코드의 top 옵션인데 해당 옵션은 position: sticky로 움직이는 view 영역의 css top 속성입니다.

6. Issues

사용하다가 개선점이나, 버그가 발생하면, recat-catbow-scrollview의 Issues 남겨 주시면,
라이브러리 유지보수에 큰 도움이 됩니다.!

7. Catbow

Catbow에서는 앞으로도 사용하기 쉽게 Interactive한 기능들을 제공하는 라이브러리를 점차 추가 할 예정입니다.
시작은 React-components-library로 했지만, 손이 닿는다면, 다른 프레임워크에서도 작동하는 library로 만들어 볼 생각입니다.

많은 관심 부탁드립니다..!! 감사합니다.