@nextrap/image
Advanced tools
A versatile image component with support for cropping, slideshows, and fullscreen viewing
A versatile and powerful image component for modern web applications that provides advanced image handling capabilities including slideshows, positioning, and fullscreen viewing.
object-positiondebug attribute)data-features: Space-separated list of features to enable. Supported values:
slideshow, fullsize, arrows, indicators, round-borders, blend (not yet implemented), dont-pause-on-hoverdata-crop: Global crop settings for all images (can be overridden per image)interval: Custom interval for slideshow transitions (ms)debug: Enables debug mode (boolean)image-container, caption-container, indicators, navigation-arrows--nxa-image-border-radius (default: 12px)nxa-image-fullsize-open: Fired when fullsize view is openednxa-image-fullsize-close: Fired when fullsize view is closednxa-image-slide-change: Fired when the active slide changes# Installation instructions will depend on your package manager
npm i @nextrap/image
<nxa-image style="width: 600px; height: 400px;" data-features="fullsize">
<img src="path/to/your/image.jpg" alt="Sample image">
</nxa-image>
<nxa-image style="width: 600px; height: 400px;" data-features="round-borders">
<img src="path/to/your/image.jpg" alt="Sample image with rounded borders">
</nxa-image>
<nxa-image style="width: 300px; height: 300px">
<img src="path/to/your/image.jpg"
data-crop="top: 10%; bottom: 10%; right: 10%; left: 10%"
alt="Cropped image">
</nxa-image>
<nxa-image style="width: 300px; height: 300px">
<img src="path/to/your/image.jpg"
data-crop="top: 50px; bottom: 50px; right: 50px; left: 50px"
alt="Cropped image">
</nxa-image>
<nxa-image style="width: 100%; height: 400px" data-features="slideshow">
<img src="path/to/image1.jpg" alt="Slide 1">
<img src="path/to/image2.jpg" alt="Slide 2">
<img src="path/to/image3.jpg" alt="Slide 3">
</nxa-image>
<nxa-image style="width: 100%; height: 400px"
data-features="slideshow arrows indicators">
<img src="path/to/image1.jpg" alt="Slide 1">
<img src="path/to/image2.jpg" alt="Slide 2">
<img src="path/to/image3.jpg" alt="Slide 3">
</nxa-image>
<nxa-image style="width: 100%; height: 400px"
data-features="slideshow arrows indicators">
<img src="path/to/image1.jpg"
data-caption="Beautiful mountain landscape"
alt="Mountain landscape">
<img src="path/to/image2.jpg"
data-caption="Serene ocean view"
alt="Ocean view">
<img src="path/to/image3.jpg"
data-caption="Urban cityscape"
alt="Cityscape">
</nxa-image>
<!-- Custom interval (2 seconds) -->
<nxa-image style="width: 100%; height: 400px"
data-features="slideshow arrows indicators"
interval="2000">
<img src="path/to/image1.jpg" alt="Slide 1">
<img src="path/to/image2.jpg" alt="Slide 2">
<img src="path/to/image3.jpg" alt="Slide 3">
</nxa-image>
<!-- Continuous slideshow (no pause on hover) -->
<nxa-image style="width: 100%; height: 400px"
data-features="slideshow arrows indicators dont-pause-on-hover">
<img src="path/to/image1.jpg" alt="Slide 1">
<img src="path/to/image2.jpg" alt="Slide 2">
<img src="path/to/image3.jpg" alt="Slide 3">
</nxa-image>
<nxa-image style="width: 100%; height: 500px"
data-features="slideshow blend fullsize arrows indicators round-borders"
interval="4000">
<img src="path/to/image1.jpg"
style="object-position: center center;"
data-caption="Beautiful mountain landscape"
alt="Mountain landscape">
<img src="path/to/image2.jpg"
style="object-position: center center;"
data-caption="Serene ocean view"
alt="Ocean view">
<img src="path/to/image3.jpg"
style="object-position: center center;"
alt="Cityscape">
</nxa-image>
<nxa-image
style="width: 100%; height: 400px"
data-features="slideshow arrows indicators fullsize"
id="myImageComponent">
<img src="path/to/image1.jpg" alt="Slide 1">
<img src="path/to/image2.jpg" alt="Slide 2">
<img src="path/to/image3.jpg" alt="Slide 3">
</nxa-image>
<script>
// Get the component instance
const imageComponent = document.getElementById('myImageComponent');
// Add event listeners
imageComponent.onSlideChange = (index, image) => {
console.log(`Slide changed to index ${index}`);
};
imageComponent.onFullscreenEnter = (image) => {
console.log('Entered fullscreen mode');
};
imageComponent.onFullscreenExit = (image) => {
console.log('Exited fullscreen mode');
};
imageComponent.onSlideshowPause = (image) => {
console.log('Slideshow paused');
};
imageComponent.onSlideshowResume = (image) => {
console.log('Slideshow resumed');
};
imageComponent.onImageClick = (image, event) => {
console.log('Image clicked', event);
};
</script>
The main component that handles all image functionality.
style: Standard CSS styling (width, height required)data-features: Space-separated list of features to enable:
slideshow: Enables slideshow functionalityfullsize: Enables fullscreen modal viewarrows: Shows navigation arrowsindicators: Shows slide indicatorsround-borders: Applies rounded cornersdont-pause-on-hover: Prevents slideshow from pausing on hoverinterval: Custom interval for slideshow transitions (in milliseconds)debug: Enables debug mode (boolean)onSlideChange: Called when the active slide changes. Receives the index of the new active slide and the image element.onFullscreenEnter: Called when entering fullscreen mode. Receives the image element that was clicked.onFullscreenExit: Called when exiting fullscreen mode. Receives the image element that was in fullscreen.onSlideshowPause: Called when the slideshow is paused. Receives the current active image element.onSlideshowResume: Called when the slideshow is resumed. Receives the current active image element.onImageClick: Called when an image is clicked. Receives the clicked image element and the click event.style.object-position: Controls image positioningdata-caption: Adds a caption to the imagedata-crop: Specifies crop dimensions in percentages or pixelsalt: Alternative text for accessibilityThe component is designed to work in all modern browsers that support Web Components.
The project uses modern web development tools and practices:
src/
├── index.ts # Main entry point
├── stories/ # Storybook stories and documentation
└── image/
├── nxa-image.ts # Core component implementation
├── style.ts # Styling definitions
├── nxa-image.utils.ts # Utility functions
├── nxa-image.types.ts # TypeScript type definitions
├── nxa-image.test.js # Component tests
├── pixel-matrix.png # Test image asset
└── README.md # Component-specific documentation
npm install
npm run dev
npm test
This project is licensed under the terms specified in the LICENSE.txt file.
For detailed information about changes in each version, please take a look at the RELEASE_NOTES.md file.
Contributions are welcome! Please feel free to submit a Pull Request.
FAQs
A versatile image component with support for cropping, slideshows, and fullscreen viewing
We found that @nextrap/image demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 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
A data handling bug in OSV.dev caused disputed CVEs to disappear from vulnerability feeds until a recent fix restored over 500 advisories.
Research
/Security News
175 malicious npm packages (26k+ downloads) used unpkg CDN to host redirect scripts for a credential-phishing campaign targeting 135+ organizations worldwide.
Security News
Python 3.14 adds template strings, deferred annotations, and subinterpreters, plus free-threaded mode, an experimental JIT, and Sigstore verification.