1.2.2 • Published 1 year ago
react-catbow-scrollview v1.2.2
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 />}
/>
);
}
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
1.2.0
1 year ago
1.2.2
1 year ago
1.2.1
1 year ago
1.1.5
1 year ago
1.1.4
1 year ago
1.1.3
1 year ago
1.1.1
1 year ago
1.1.0
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago
0.2.2
1 year ago
0.2.1
1 year ago
0.2.0
1 year ago
0.1.9
1 year ago
0.1.8
1 year ago
0.1.7
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.1.4
1 year ago
0.1.3
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago