Can I use the Rafflecopter widget with React.js? – Rafflecopter Support

Yep! React is great and using it with the Rafflecopter widget is fairly straightforward.

Here's a React component that will render a Rafflecopter widget:

var Giveaway = React.createClass({

  componentDidMount: function() {
    var script = document.createElement("script")
    script.src = "https://widget-prime.rafflecopter.com/launch.js"
    document.body.appendChild(script)
  },

    render: function() {
    return (
      <a className="rcptr" data-raflid={this.props.id} href="http://www.rafflecopter.com/rafl/display/{this.props.id}/" data-theme="classic" data-template={this.props.template}  rel="nofollow">a Rafflecopter giveaway</a>
    )
  }

})

The component takes in one mandatory prop (id) and one optional prop (template), which you can find by locating thedata-raflid and data-template portions of the standard Rafflecopter embed code.

This example will render the widget from our tour page:

// Be sure to use your own giveaway and template here
<Giveaway 
  id="sdkdemo2"
  template="546f72a0464e2ee08b9c6f41" />

... or without a template:

<Giveaway id="sdkdemo2" />

Check out a full working demo on JSFiddle. You can even modify it inline and test it live!

Comments