scrollable-image
What is this
A React component built by The Reporter Taiwan.
Published as an npm package.
It has been used in the news articles of The Reporter Taiwan
Examples:
We also provide a component generator as a web service, see the User Guide(zh-tw).
How to use this package
Install
yarn add @twreporter/scrollable-imageor you can use npm:
npm install --save @twreporter/scrollable-imageUsage
Scrollable Image Component
import scrollableImage under the component you want to have a horizontally scrollable image.
import scrollableImage from '@twreporter/scrollable-image'
export default class YourComponent extends React.Component {
// Provide image links
const testingImageSrcs = ['https://test-image-1.jpg', 'https://test-image-2.jpg']
// Use it with other components
const someWhereInYourComponent = (
<div>
<OtherComponent />
<scrollableImage.Component imgSrc={testingImageSrcs} />
<OtherComponent />
</div>
)
// Or just use it standalone
const standalone = (
<scrollableImage.Component imgSrc={testingImageSrcs} />
)
render() {
return (
<div>{someWhereInPage}</div>
)
}
}Props
| props | type | default | description |
|---|---|---|---|
| data | Array | Array of string which is image link and will be the src of <img>. |
|
| lazyload | Boolean | false | Whether to enable lazyload to load scrollableImage component only when its top edge is within 300 viewport height to viewport |
Build Embedded Code
In rare cases, you want to build embedded code and make it embed in <body> element of a HTML document.
import scrollableImage from '@twreporter/scrollable-image'
import scrollableImageAssets from '@twreporter/scrollable-image/dist/webpack-assets.json'
// Provide image links
const testingImageSrcs = [
'https://test-image-1.jpg',
'https://test-image-2.jpg',
]
const embeddedCode = scrollableImage.buildEmbeddedCode(
{
data: testingImageSrcs,
},
scrollableImageAssets
)How to develop this package
-
We use
webpack-dev-serverto render a mock data for development.# Start the webpack-dev-server make dev-server -
Or use
babel --watchto complie the source file if there's any change happenedmake dev
-
If you need to update the embedded code, there is an embedded code testing server serves a html document with injected embedded code
# Build testing embedded code and start express server to test it
make test-embedded-codeHow to publish this package
# Babel transpile es6 and above to es5 at lib/
# Build webpack bundles, chunks and webpack-assets.json to dist/
# Files in lib/ and dist/ folders will be published to npm
make buildyarn publish
# OR
npm publish