{"id":19472090,"url":"https://github.com/shubham10divakar/react-sd-gallery","last_synced_at":"2026-02-21T11:31:21.401Z","repository":{"id":250112810,"uuid":"833479693","full_name":"shubham10divakar/react-sd-gallery","owner":"shubham10divakar","description":"A customizable React gallery library that provides an immersive image viewing experience with features like lazy loading, lightbox with zoom and pan, customizable transition effects, image captions, fullscreen mode, thumbnail navigation, autoplay slideshow, and mobile gesture support.","archived":false,"fork":false,"pushed_at":"2024-08-06T06:41:05.000Z","size":17100,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T08:35:00.072Z","etag":null,"topics":["carousel-component","gallery","javascript","react","reactcomponents","reactjs","reactlibrary"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shubham10divakar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-25T06:26:12.000Z","updated_at":"2024-08-06T06:41:07.000Z","dependencies_parsed_at":"2025-06-26T07:42:07.256Z","dependency_job_id":null,"html_url":"https://github.com/shubham10divakar/react-sd-gallery","commit_stats":null,"previous_names":["shubham10divakar/react-sd-gallery"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shubham10divakar/react-sd-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubham10divakar%2Freact-sd-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubham10divakar%2Freact-sd-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubham10divakar%2Freact-sd-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubham10divakar%2Freact-sd-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shubham10divakar","download_url":"https://codeload.github.com/shubham10divakar/react-sd-gallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubham10divakar%2Freact-sd-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29679791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T11:29:27.227Z","status":"ssl_error","status_checked_at":"2026-02-21T11:29:20.292Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel-component","gallery","javascript","react","reactcomponents","reactjs","reactlibrary"],"created_at":"2024-11-10T19:12:27.030Z","updated_at":"2026-02-21T11:31:21.363Z","avatar_url":"https://github.com/shubham10divakar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n[![npm version](https://badge.fury.io/js/react-sd-gallery.svg)](https://badge.fury.io/js/react-sd-gallery)\n\nReact Sleek Design Gallery is a customizable React gallery library that provides an immersive image viewing experience with features like lazy loading, lightbox with zoom and pan, customizable transition effects, image captions, fullscreen mode, thumbnail navigation, autoplay slideshow, and mobile gesture support.\n\n## NPM \nNPM Link - https://www.npmjs.com/package/react-sd-gallery?activeTab=readme\n\n## Features\n1. Lazy Loading: Load images as they appear in the viewport, improving performance.\n2. Lightbox: Display images in a full-screen overlay with zoom and pan capabilities.\n3. Customizable Transition Effects: Switch between images with various transition effects like fade and slide.\n4. Image Captions: Show captions on image hover or inside the lightbox.\n5. Fullscreen Mode: View images in fullscreen with a simple toggle.\n6. Thumbnail Navigation: Quickly navigate through images using thumbnail previews.\n7. Autoplay Slideshow: Automatically transition through images at a user-defined interval.\n8. Mobile Gesture Support: Navigate through images and control zoom with intuitive touch gestures.(In development)\n\n## Installation\n\nInstall `react-sd-gallery` using npm or yarn:\n\n```bash\nnpm install react-sd-gallery\n```\nor bash\n```\nyarn add react-sd-gallery\n```\n## Usage\n\nHere's an example of how to use the library in your React application:\n\njsx\n```\n// App.js\nimport React from 'react';\nimport { Gallery } from 'react-sd-gallery';\n\nconst images = [\n  {\n    src: 'path/to/image1.jpg',\n    alt: 'Image 1',\n    thumbnail: 'path/to/thumbnail1.jpg',\n    alt_thumbnail: 'Thumbnail 1',\n    caption: 'This is image 1'\n  },\n  {\n    src: 'path/to/image2.jpg',\n    alt: 'Image 2',\n    thumbnail: 'path/to/thumbnail2.jpg',\n    alt_thumbnail: 'Thumbnail 2',\n    caption: 'This is image 2'\n  },\n  // More images...\n];\n\nconst MyGallery = () =\u003e (\n  \u003cGallery images={images} autoplayTime={5000} /\u003e\n);\n\nexport default MyGallery;\n```\n\n# Props\n\n- images: An array of image objects, each containing:\n- src: The main image source.\n- alt: Alt text for the main image.\n- thumbnail: (Optional) Thumbnail image source.\n- alt_thumbnail: (Optional) Alt text for the thumbnail.\n- caption: (Optional) Caption text for the image.\n- autoplayTime: (Optional) Interval time in milliseconds for the autoplay slideshow.\n\n## Images as per above code output and some work samples\n\n![This is an alt text.](/image/1.png \"This is a sample image.\")\n![This is an alt text.](/image/2.png \"This is a sample image.\")\n![This is an alt text.](/image/3.png \"This is a sample image.\")\n![This is an alt text.](/image/4.png \"This is a sample image.\")\n![This is an alt text.](/image/5.png \"This is a sample image.\")\n\n\n\n## Contribution\nContributions are welcome! Please submit a pull request or open an issue to suggest improvements or report bugs.\nThis is still in development hence suggest improvements.\n\n## About Me\nI am Subham Divakar and I am the developer of multiple python and react libraries.\nCheck out my worksamples on my portfolio site.\n\n## Connect with Me\n\n    LinkedIn: https://www.linkedin.com/in/subham-divakar-a7420a12a/\n    GitHub: https://github.com/shubham10divakar\n    Portfolio: https://shubham10divakar.github.io/showcasehub/\n\n## Feedback\n\nYour feedback is important! Please share your thoughts and suggestions.\nLicense\n\nThis project is licensed under the MIT License.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubham10divakar%2Freact-sd-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshubham10divakar%2Freact-sd-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubham10divakar%2Freact-sd-gallery/lists"}