{"id":13680439,"url":"https://github.com/transitive-bullshit/react-background-slideshow","last_synced_at":"2025-05-10T18:11:40.728Z","repository":{"id":54503904,"uuid":"104022708","full_name":"transitive-bullshit/react-background-slideshow","owner":"transitive-bullshit","description":"Sexy tiled background slideshow for React 🔥","archived":false,"fork":false,"pushed_at":"2020-07-11T23:11:10.000Z","size":16702,"stargazers_count":110,"open_issues_count":2,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-09T07:22:35.666Z","etag":null,"topics":["background","component","image","react","slideshow"],"latest_commit_sha":null,"homepage":"https://transitive-bullshit.github.io/react-background-slideshow/","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/transitive-bullshit.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}},"created_at":"2017-09-19T03:38:25.000Z","updated_at":"2025-02-11T15:49:41.000Z","dependencies_parsed_at":"2022-08-13T18:00:55.205Z","dependency_job_id":null,"html_url":"https://github.com/transitive-bullshit/react-background-slideshow","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transitive-bullshit%2Freact-background-slideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transitive-bullshit%2Freact-background-slideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transitive-bullshit%2Freact-background-slideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transitive-bullshit%2Freact-background-slideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/transitive-bullshit","download_url":"https://codeload.github.com/transitive-bullshit/react-background-slideshow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253206650,"owners_count":21871231,"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":["background","component","image","react","slideshow"],"created_at":"2024-08-02T13:01:17.095Z","updated_at":"2025-05-09T07:22:42.726Z","avatar_url":"https://github.com/transitive-bullshit.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# react-background-slideshow\n\n\u003e Sexy tiled background image slideshow for React - [Try it out!](https://transitive-bullshit.github.io/react-background-slideshow) :fire:\n\n[![NPM](https://img.shields.io/npm/v/react-background-slideshow.svg)](https://www.npmjs.com/package/react-background-slideshow) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n![](https://raw.githubusercontent.com/transitive-bullshit/react-background-slideshow/master/example/media/slideshow-demo-desktop.gif)\n\n*(Animations sped up for demo)*\n\n## Intro\n\nThis component is meant to be used as a **full viewport background slideshow** that can easily add a slick, polished feel to pages that don't have much content.\n\nI've personally used it for several projects as the background for login / signup / dialog screens where the only content is a single foreground modal generally prompting the user for some info.\n\n## Install\n\n```bash\nnpm install --save react-background-slideshow\n```\n\n## Usage\n\n```js\nimport React, { Component } from 'react'\n\nimport BackgroundSlideshow from 'react-background-slideshow'\n\nimport image1 from './assets/001.jpg'\nimport image2 from './assets/002.jpg'\nimport image3 from './assets/003.jpg'\n\nexport default class App extends Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cBackgroundSlideshow images={[ image1, image2, image3 ]} /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\nThe `BackgroundSlideshow` component will have `position: absolute` and sized to stretch with its container, which will most often be the root `window`.\n\n## API\n\n### ReactBackgroundSlideshow\n\n- `props.images` - array\u003cstring\u003e, *required* array of images to transition between.\n- `props.disableClick` - boolean, optional disables click to transition (default `false`)\n- `props.disableInterval` - boolean, optional disables automated automation at interval specified by `automationDelay` (default `false`)\n- `props.animationDelay` - number, optional specifies the interval in ms for transitions while idle (default `10000`)\n- `props.alt` - string, optional specifies the alt attribute to use for the underlying `\u003cimg\u003e` elements (default `background slideshow`)\n- `props.startAt` - number, optional specifies the index to start the slideshow at. By default will randomly select one.\n- `props.onChange` - function, optional specifies the callback to call when the transition is complete. This is sent the argument { index: number, image: string }. `index` is the `props.images` index the slideshow is showing. `image` is the image url from `images` being shown after the change.\n\n**Note** I highly recommend using background images with a resolution of 1280x850. The effects have not been tested thoroughly with other asset sizes and there is a possibility that other aspect ratios break some of the internal assumptions, as the effects are using `\u003cimg\u003e` elements and css transforms instead of `background-image` / `backgrouns-size: contain or cover` for performance reasons. If you have any questions or run into issues with this constraint, I recommend reading through the original [codrops article](http://tympanus.net/codrops/2014/06/11/how-to-create-a-tiled-background-slideshow) thoroughly.\n\n*Note* there are 3 distinct transition effects, and the component will randomly cycle through them.\n\n*Note* the component will randomly choose an image to start from.\n\n## [Demo](https://transitive-bullshit.github.io/react-background-slideshow)\n\nThis repo comes with an example [create-react-app](https://github.com/facebookincubator/create-react-app) under `example/` that can be run locally to experiment with the component. This demo is also hosted [here](https://transitive-bullshit.github.io/react-background-slideshow).\n\n```bash\ncd example\nnpm install\nnpm start\n```\n\nThis will start the create-react-app dev server locally on port 3000 and open the demo app in your default browser.\n\n## Mobile Demo\n\n![](https://raw.githubusercontent.com/transitive-bullshit/react-background-slideshow/master/example/media/slideshow-demo-mobile.gif)\n\nThis component is fully responsive and should work on all screen sizes. The above gif was captured from an emulated iPhone 6.\n\n## Credit\n\nThis component is a React port of a jQuery effect published in 2014 in an awesome [article](http://tympanus.net/codrops/2014/06/11/how-to-create-a-tiled-background-slideshow) by [codrops](https://tympanus.net/codrops/). The original article gives a great breakdown of how the transitions work, with all the underlying logic still very relevant in a post-jQuery world. This component replaces all of the mutable DOM interactions from the original version with more modern React conventions.\n\n## License\n\nMIT © [Travis Fischer](https://github.com/transitive-bullshit)\n\nSupport my OSS work by \u003ca href=\"https://twitter.com/transitive_bs\"\u003efollowing me on twitter \u003cimg src=\"https://storage.googleapis.com/saasify-assets/twitter-logo.svg\" alt=\"twitter\" height=\"24px\" align=\"center\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransitive-bullshit%2Freact-background-slideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftransitive-bullshit%2Freact-background-slideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransitive-bullshit%2Freact-background-slideshow/lists"}