@twreporter/scrollable-image
Advanced tools
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).
yarn add @twreporter/scrollable-image
or you can use npm:
npm install --save @twreporter/scrollable-image
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 | 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 |
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
)
We use webpack-dev-server to render a mock data for development.
# Start the webpack-dev-server
make dev-server
Or use babel --watch to complie the source file if there's any change happened
make 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-code
# 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 build
yarn publish
# OR
npm publish
FAQs
The Reporter scrollable image component
We found that @twreporter/scrollable-image demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.
Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
Security News
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.