react-crowdriff-gallery

0.0.2 • Public • Published

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

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>

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

Readme

Keywords

Package Sidebar

Install

npm i react-crowdriff-gallery

Weekly Downloads

402

Version

0.0.2

License

ISC

Unpacked Size

7.97 kB

Total Files

4

Last publish

Collaborators

  • crowdriff-dev