https://github.com/transitive-bullshit/react-fluid-gallery

Fluid media gallery for React powered by WebGL.
https://github.com/transitive-bullshit/react-fluid-gallery

gallery gallery-images react webgl

Last synced: about 1 month ago
JSON representation

Fluid media gallery for React powered by WebGL.

• Host: GitHub
• URL: https://github.com/transitive-bullshit/react-fluid-gallery
• Owner: transitive-bullshit
• Created: 2018-11-30T20:16:29.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-12-29T21:40:44.000Z (almost 4 years ago)
• Last Synced: 2025-08-30T01:53:47.973Z (about 1 month ago)
• Topics: gallery, gallery-images, react, webgl
• Language: JavaScript
• Homepage: https://transitive-bullshit.github.io/react-fluid-gallery
• Size: 62.4 MB
• Stars: 81
• Watchers: 2
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-list - react-fluid-gallery - bullshit | 65 | (JavaScript)

README

          
# react-fluid-gallery ([demo](https://transitive-bullshit.github.io/react-fluid-gallery/))

> Fluid media gallery for React powered by WebGL.

[![NPM](https://img.shields.io/npm/v/react-fluid-gallery.svg)](https://www.npmjs.com/package/react-fluid-gallery) [![Build Status](https://travis-ci.com/transitive-bullshit/react-fluid-gallery.svg?branch=master)](https://travis-ci.com/transitive-bullshit/react-fluid-gallery) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Demo](https://raw.githubusercontent.com/transitive-bullshit/react-fluid-gallery/master/example/demo.gif)](https://transitive-bullshit.github.io/react-fluid-gallery/)

Inspired by [Tao Tajima](http://taotajima.jp/). Use the scroll wheel or swipe to transition fluidly between background images in the gallery.

## Install

```bash

npm install --save react-fluid-gallery

```

## Usage

Check out the [demo](https://transitive-bullshit.github.io/react-fluid-gallery/).

```jsx

import React, { Component } from 'react'

import FluidGallery from 'react-fluid-gallery'

import image1 from './1.jpg'

import image2 from './2.jpg'

import video from './video.mp4'

export default class App extends Component {

  render () {

    return (

      

    )

  }

}

```

## Props

| Property    | Type             | Default  | Description |

|:------------|:-----------------|:---------|:------------|

| `slides`    | `Array`  | **required** | Array of image / video URLs to use for the gallery slides. |

| `startAt`   | number           | random   | Default slide to show. |

| `onChange`  | function(index: number) | undefined   | Optional callback when the active slide is changed. |

| `...`       | ...              | undefined | Any other props are applied to the root element. |

## Credits

The original version of this awesome gallery technique was published on the personal website of [Tao Tajima](http://taotajima.jp/).

## License

MIT © [Travis Fischer](https://github.com/transitive-bullshit)

Support my OSS work by following me on twitter