react-crowdriff-gallery/README.md

React component to put a CrowdRiff embed code in a React app

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