해당 포스터는 react-catbow-scrollview 사용법을 알리기 위해 작성 되었습니다. (version: 1.1.4 기준)
1. JSDoc으로 설명하는 친절한 코드 설명
ScrollView 코드에디터에서 옵션 설정 방법을 알 수 있게 지원 해줍니다.
컴포넌트에 마우스를 올려두기만 하면 됩니다.!!
하지만 그래도 잘 모르겠다면 react-catbow-scrollview 레파지토리에서 README.md의 option을 참고하세요.!
GitHub - catbow/react-catbow-scrollview
Contribute to catbow/react-catbow-scrollview development by creating an account on GitHub.
github.com
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. 풀 스크린이 아니면 주변을 꾸며주자, 아니면 아래처럼된다.!!
풀스크린일때
풀스크린 옵션
const option = {
videoImageCount: 754,
imgUrl: './004/',
startNum: 10000,
extension: '.jpg',
scrollAreaY: 6000,
viewPort: {
width: '100vw',
height: '100vh',
},
};
3. viewPort는 img Tag 그 자체입니다.
border 속성으로 원을 만들어 본 예시입니다.
option
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. 스크롤 영역 scrollAreaY는, 재생길이를 늘려줍니다.
사용자마다 원하는 비율이 있을텐데 100단위로 늘려보면서 테스트 해보면 원하는 비율을 얻을 수 있을 것입니다.
option
const option = {
videoImageCount: 754,
imgUrl: './004/',
startNum: 10000,
extension: '.jpg',
scrollAreaY: 100000, // 10만으로 하면 스크롤하기 힘듭니다
viewPort: {
width: '100vw',
height: '100vh',
},
};
5. viewItem은 jsx를 내부에서 렌더해주는 특별한 옵션입니다.
간단하게 hello 라는 문구를 넣어 보았습니다.
2가지 규칙만 지키면 됩니다.
- 넘겨질 컴포넌트는 최상위에 css position: absolute 속성을 꼭 넣어줍니다.
- JSX문법으로 넘겨야합니다. viewItem으로 prop을 넘기면 컴포넌트 내부에서 렌더링 해주는 것입니다.
// ScrollView 안에 렌더링할 컴포넌트
const Component = () =>
const style = { position: 'absolute', top: '95px', left: '75px' }
return(
<div style={...style}>
<div style={{ fontSize: '150px' }}>hello</div>
</div>
);
// viewItem에 컴포넌트 넘길 때
<ScrollView option={option} viewItem={<Component />} />
6. option.top
position: sticky로 움직이는 view 영역의 css top 속성입니다.
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',
},
};
7. Issues
사용하다가 개선점이나, 버그가 발생하면, recat-catbow-scrollview의 Issues 남겨 주시면,
라이브러리 유지보수에 큰 도움이 됩니다.!
8. Catbow
Catbow에서는 앞으로도 사용하기 쉽게 Interactive한 기능들을 제공하는 라이브러리를 점차 추가 할 예정입니다.
많은 관심 부탁드립니다..!! 감사합니다.
댓글