Package Exports

react-crowdriff-gallery

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-crowdriff-gallery) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CrowdRiff Gallery React Component

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 crowdriff__gallery 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>
  }
}