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

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

    Install

    npm i react-crowdriff-gallery

    DownloadsWeekly Downloads

    112

    Version

    0.0.2

    License

    ISC

    Unpacked Size

    7.97 kB

    Total Files

    4

    Last publish

    Collaborators

    • crowdriff-dev