viral-loops-react/README.md

Unofficial React component wrapper for https://viral-loops.com

# viral-loops-react
> React component wrapper for https://viral-loops.com/ script.

## Install
```javascript
yarn add viral-loops-react
# or
npm install viral-loops-react
```

## Usage
Setting up your Viral Loops component involves 3 steps:
1. Installing the Viral Loops script.
2. Importing the `ViralLoops` module.
3. Configuring the `<ViralLoops />` component.

### 1: Install the Viral Loops script
First, log in to your Viral Loops dashboard via your [account](https://viral-loops.com/). Next, select the campaign you're interested in, click the "edit" button, then, in the footer of the page, click the "Installation" link.

On this page, select "I'll do it myself", and copy/paste the revealed script into the file that renders the root of your React application. For `create-react-app` users, this will be your `public/index.html` file.

To finish off this step, get the "Campaign ID" public token from the same page as the script you just copied, and include it in your project as an environment variable.

### 2: Import the `ViralLoops` module
Secondly, import the `ViralLoops` module into the view where you want the Viral Loops widgets to be displayed.

```
import ViralLoops from 'viral-loops-react';
```

In preparation for the next step, you'll also need to import the Viral Loops "Campaign ID" that you stored in an environment variable at the end of the previous step.

e.g. (assuming you're using [`dotenv`](https://github.com/motdotla/dotenv) to manage env vars)

```
# in .env
REACT_APP_VIRAL_LOOPS_CAMPAIGN_ID='yourCampaignID'

Note: If you're using create-react-app and the env var's name isn't prefixed with "REACT_APP" it will not be included in the build. This is a create-react-app convention.

# in config.js
const config = {
  viralLoopsCampaignId: process.env.REACT_APP_VIRAL_LOOPS_CAMPAIGN_ID
}

# in your view's file
import config from './config';
```

### 3: Configure the `<ViralLoops />` component
Lastly, declare the component, passing it the necessary props to get the widgets you want.

Valid props are:
```
publicToken: 'string' (required)

formWidget: 'boolean' (optional) <--- displays the "Form" widget

milestoneWidget: 'boolean' (optional) <--- displays the "Milestones" widget

counterWidget: 'boolean' (optional) <--- displays the "Referral Counter" widget
```

e.g.
```javascript
<ViralLoops 
  publicToken={config.viralLoopsKey}
  formWidget
  milestoneWidget
/>
```

## Note:
`viral-loops-react` does not support Internet Explorer 11, due to errors that are thrown by the Viral Loops script when included in projects generated by `create-react-app`.