react-crowdriff-gallery

Put a CrowdRiff embed code in a React app!

This lightweight component allows CrowdRiff customers to embed their galleries on websites built in React

Usage

Install via npm or your package manager of choice!

npm install react-crowdriff-gallery

Import and use

import { CrowdRiffGallery } from 'react-crowdriff-gallery'

class App extends Component {
  render() {
    <div>
      <CrowdRiffGallery hash="hash1234" />
    </div>
  }
}

|Prop Name | isRequired | type | Description | |---|---|---|---| | hash | true | string | 8 or 16 character hash found in the gallery's embed code |

Finding a gallery hash

The gallery hash is located within the id field of the embed code, prepended by either cr-init__ or cr__init- depending on the version.

<script id="cr-init__1234hash" src="https://starling.crowdriff.com/js/crowdriff.js" async></script>
OR
<script id="cr__init-1234hash" src="https://embed.crowdriff.com/js/init?hash=1234hash" async></script>

For dynamic gallery switching

The component handles the embedding of the script onto the page, as well as hooking into the crowdriffgallery window object that registers and renders gallery objects. As a result, the setup and teardown is in the componentDidMount and componentWillUnmount lifecycle methods. If you want to dynamically change gallery hashes, set a key prop equal to the hash on the component to trigger a new instance of the component.

Dynamic gallery example
class DynamicGallery extends Component {
  render() {
    <div>
      <CrowdRiffGallery hash={this.props.hash} key={this.props.hash} />
    </div>
  }
}