{"id":19492416,"url":"https://github.com/cosmitar/reactive-blueimp-gallery","last_synced_at":"2025-04-25T19:32:30.293Z","repository":{"id":20645665,"uuid":"90156460","full_name":"Cosmitar/reactive-blueimp-gallery","owner":"Cosmitar","description":"A React component (HOC) for BlueImp gallery","archived":false,"fork":false,"pushed_at":"2023-07-25T14:06:10.000Z","size":11109,"stargazers_count":2,"open_issues_count":13,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T10:25:16.278Z","etag":null,"topics":["blueimp-gallery","carousel","carousel-component","javascript","react-components","react-storybook","reactjs","slideshow","swipe"],"latest_commit_sha":null,"homepage":"https://cosmitar.github.io/reactive-blueimp-gallery/","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/Cosmitar.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}},"created_at":"2017-05-03T14:11:49.000Z","updated_at":"2025-03-28T18:48:10.000Z","dependencies_parsed_at":"2024-11-10T21:22:09.705Z","dependency_job_id":null,"html_url":"https://github.com/Cosmitar/reactive-blueimp-gallery","commit_stats":{"total_commits":42,"total_committers":2,"mean_commits":21.0,"dds":"0.33333333333333337","last_synced_commit":"101e329184373cb574c9917adff95aee65039d00"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cosmitar%2Freactive-blueimp-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cosmitar%2Freactive-blueimp-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cosmitar%2Freactive-blueimp-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cosmitar%2Freactive-blueimp-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cosmitar","download_url":"https://codeload.github.com/Cosmitar/reactive-blueimp-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250882637,"owners_count":21502341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["blueimp-gallery","carousel","carousel-component","javascript","react-components","react-storybook","reactjs","slideshow","swipe"],"created_at":"2024-11-10T21:21:05.033Z","updated_at":"2025-04-25T19:32:27.828Z","avatar_url":"https://github.com/Cosmitar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [React + BlueImp Gallery](https://cosmitar.github.io/reactive-blueimp-gallery/) :sunrise_over_mountains:\n### NOW! Your favorite [gallery](https://github.com/blueimp/Gallery) as a React component ;)\n\nThis project is a tribute to a wonderful tool as [BlueImp Gallery](https://blueimp.github.io/Gallery/) mixed with an awesome devel sandbox like [Storybook](https://storybooks.js.org/).\nAs a result we have a useful React component for a flexible slideshow gallery.\n\n### :point_up:How to start\ninstall Reactive Blueimp Gallery in your project\n`npm install --save reactive-blueimp-gallery`\n\n### :v:Usage\nimport the library into your component\n```javascript\nimport ReactGallery from 'reactive-blueimp-gallery';\n```\n\nSet a source with minimum requirements\n```javascript\nconst images = [{\n  source: 'images/banana.jpg',\n}, {\n  source: 'images/apples.jpg',\n}, {\n  source: 'images/orange.jpg',\n}];\n```\n\nUse the component\n```javascript\n\u003cReactGallery source={images} /\u003e\n```\n\nand that's it! :raised_hands: a working version of BlueImp gallery into your React application :muscle:.\n\n### Options\nAs a HOC, this lib has some shortcut configurations for a [full list of options](https://github.com/blueimp/Gallery#options) that BlueImp Gallery offers.\n\nReactBlueImpGallery accepts the following props:\n\n\u003ctable class=\"rich-diff-level-zero\"\u003e\n\u003cthead class=\"rich-diff-level-one\"\u003e\n\u003ctr\u003e\u003ctd\u003e\u003cb\u003eProperty\u003c/b\u003e\u003c/td\u003e\u003ctd\u003e\u003cb\u003eType\u003c/b\u003e\u003c/td\u003e\u003ctd\u003e\u003cb\u003eDescription\u003c/b\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody class=\"rich-diff-level-one\"\u003e\n\u003ctr\u003e\n\u003ctd\u003eid\u003c/td\u003e\u003ctd\u003enumber\u003c/td\u003e\u003ctd\u003ejust an element identifier, attribute rendered into gallery HTML.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eclassName\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eclass name to handle presentational aspects, attribute rendered into gallery HTML.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ewithControls\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eto initialize the Gallery with visible controls.\n\n```javascript\n\u003cReactGallery withControls source={images} /\u003e\n```\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003einlineCarousel\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eto display the images in an inline carousel instead of a lightbox.\n\n```javascript\n\u003cReactGallery inlineCarousel source={images} /\u003e\n```\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eoptions\u003c/td\u003e\u003ctd\u003eobject\u003c/td\u003e\u003ctd\u003eto send to BlueImp Gallery any of the \u003ca href=\"https://github.com/blueimp/Gallery#options\"\u003esupported options\u003c/a\u003e.\n\n```javascript\n\u003cReactGallery\n  options={{\n    transitionSpeed: 200,\n  }}\n  source={images}\n/\u003e\n```\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eoverlays\u003c/td\u003e\u003ctd\u003eReactBlueImpGallery.Overlays\u003c/td\u003e\u003ctd\u003eto send custom overlays for slides. Lets talk about this in the \u003ca href=\"https://github.com/Cosmitar/reactive-blueimp-gallery#custom-overlays\"\u003enext section\u003c/a\u003e.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\nAnd finally, into `options` prop you can find a useful custom event `onopen` that return the original BlueImp Gallery instance allowing API control. See full API methods [here](https://github.com/blueimp/Gallery#api-methods)\n\n```javascript\n\u003cReactGallery\n  options={{\n    onopen: gal =\u003e gal.pause(),\n  }}\n  source={images}\n/\u003e\n```\n### Custom Overlays\nReactive BlueImp Gallery come with a helper component to customize slides overlay. `Overlays` component allows you to include extra HTML elements over a slide and also has props to quick set up for existing elements. `Overlays` is part of `ReactBlueImpGallery` and can be accesed as an attribute of it.\n```javascript\nconst customOverlays = (\n  \u003cReactGallery.Overlays\u003e\n    \u003cp className=\"footer-copywrite\"\u003e\u0026reg; 2017 All rights reserved\u003c/p\u003e\n  \u003c/ReactGallery.Overlays\u003e\n);\n\u003cReactGallery\n  overlays={customOverlays}\n  source={images}\n/\u003e\n```\n\nIn the example above we're adding a `\u003cp\u003e` element into default slide overlay. Also you can define `Overlays` props\n\u003ctable class=\"rich-diff-level-zero\"\u003e\n\u003cthead class=\"rich-diff-level-one\"\u003e\n\u003ctr\u003e\u003ctd\u003e\u003cb\u003eProperty\u003c/b\u003e\u003c/td\u003e\u003ctd\u003e\u003cb\u003eType\u003c/b\u003e\u003c/td\u003e\u003ctd\u003e\u003cb\u003eDescription\u003c/b\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody class=\"rich-diff-level-one\"\u003e\n\u003ctr\u003e\n\u003ctd\u003eclassName\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eto specify overlay CSS.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003enoTitle\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eto hide default title element.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003enoArrows\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eto hide default arrows (next/prev) elements.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003enoClose\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eto hide default close (x) element.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003enoPlayPause\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eto hide default play/pause element.\n\n```javascript\n\u003cReactGallery\n  overlays={\u003cReactGallery.Overlays noPlayPause noTitle /\u003e}\n  source={images}\n/\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003enoIndicator\u003c/td\u003e\u003ctd\u003eboolean\u003c/td\u003e\u003ctd\u003eto hide default slide indicator (ooo) elements.\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Slides\nThe slide component it also comes as `ReactBlueImpGallery` property. In the first example of this page, the slide component is receiving just one prop but they can accept others.\n\n\u003ctable class=\"rich-diff-level-zero\"\u003e\n\u003cthead class=\"rich-diff-level-one\"\u003e\n\u003ctr\u003e\u003ctd\u003e\u003cb\u003eProperty\u003c/b\u003e\u003c/td\u003e\u003ctd\u003e\u003cb\u003eType\u003c/b\u003e\u003c/td\u003e\u003ctd\u003e\u003cb\u003eDescription\u003c/b\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody class=\"rich-diff-level-one\"\u003e\n\u003ctr\u003e\n\u003ctd\u003esource\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003efor image or video resource, this is an alias of `href` also valid for images but not for video slides.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ethumbanil\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003eto set a resource to show in thumbanils. `source` will be used if `thumbnails` is undefined.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003etype\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e to set slide mime type. `image/jpeg` by default.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003etitle\u003c/td\u003e\u003ctd\u003estring\u003c/td\u003e\u003ctd\u003e info to show in the slide overlay.\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### :sparkles: Slides with React content :rocket:\nBlueImp Gallery supports different [slide types](https://github.com/blueimp/Gallery#additional-content-types) with a very good approach to customize content types. This way it supports HTML5, Youtube and Vimeo videos. Taking advantage of that smart design, this lib add a new content type to handle slide content with React components.\n\nThe content type is `text/react` (no real mime type for React) and you can implement your React component like the following example.\n```javascript\nconst MyReactSlideContent = () =\u003e {\n  return \u003cp\u003eMy React slide content\u003c/p\u003e;\n}\n\n...\n\n\u003cReactGallery\u003e\n  \u003cReactGallery.Slide\n    thumbnail=\"images/thumbnails/banana.jpg\"\n    type=\"text/react\" // to tell BlueImp Gallery which slide factory should use\n  \u003e\n    \u003cMyReactSlideContent /\u003e\n  \u003c/ReactGallery.Slide\u003e\n\u003c/ReactGallery\u003e\n```\nOf course you can have (or you'll need in real life scenarios) dynamic data into your React slide content, but if you need data from a parent component there's a little bit complex issue to solve. Since BlueImp Gallery is in charge of the slide render with vanilla javascript, React lost control of that HTML. In order to let React to render the slides, we're calling ReactDom method to draw custom component into the slide, but that way the scope of the component you wrote and the scope of the instance of your component into the slide are different. Then, a solution is an explicit definition of the data which should be sent to rendered instance of your componente. That can be achived setting a `Slide` prop called `SynchedData` like this\n```javascript\nconst MyReactSlideContent = ({ slideCount }) =\u003e {\n  return \u003cp\u003eMy React slide content with {slideCount}\u003c/p\u003e;\n}\n\n...\n\n\u003cReactGallery\u003e\n  \u003cReactGallery.Slide\n    thumbnail=\"images/thumbnails/banana.jpg\"\n    type=\"text/react\" // to tell BlueImp Gallery which slide factory should use\n    synchedData={{ slideCount: this.state.slideCount }} // this prop will be sent to \u003cMyReactSlideContent /\u003e\n  \u003e\n    \u003cMyReactSlideContent /\u003e\n   \u003c/ReactGallery.Slide\u003e\n\u003c/ReactGallery\u003e\n```\nThough this approach really works (you can [see it here](https://cosmitar.github.io/reactive-blueimp-gallery/?selectedKind=React%20BlueImp%20Gallery\u0026selectedStory=Custom%20React%20slide%20content\u0026full=0\u0026down=1\u0026left=1\u0026panelRight=0\u0026downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)), you sould be very cautious about implementing React components architecture into slide contents.\n\n### Test and working examples\nYou can find many full working examples into [./stories](https://github.com/Cosmitar/reactive-blueimp-gallery/tree/master/stories) folder.\n\nclone this repo\n\n`git clone https://github.com/Cosmitar/reactive-blueimp-gallery.git`\n\ninstall dependecies\n\n`npm i`\n\nstart storybook\n\n`npm run storybook`\n\nHave fun :tada:\n\n### Contributing\nPull requests and issues are welcome. If you've found a bug, please open an issue.\n\n### License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmitar%2Freactive-blueimp-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcosmitar%2Freactive-blueimp-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmitar%2Freactive-blueimp-gallery/lists"}