React <Codepen>

A react component to embed pens from codepen.io

Getting Started

• Install with NPM - npm install --save react-codepen

Usage

var React   = require('react');
var Codepen = require('react-codepen');

var Component = React.createClass({
  render: function () {
    return (
      <Codepen user="jasonbellamy" hash="XmWNEY"></Codepen>
    );
  }
});

Options

Property | Type | Argument | Values | Default | Description ---------|----------|--------------|--------------------------|-----------|------------ user | string | <required> | | null | codepen.io username. hash | string | <required> | | null | the hash id of the pen to display. height | string | <optional> | px, % | 250px | the height of the pen. width | string | <optional> | px, % | 100% | the width of the pen. tab | string | <optional> | css, html, js, result | result | the default tab that should be displayed. theme | string | <optional> | | default | the theme the pen should use.

Developing

react-codepen is built using ES6. Run the following task to compile the src/ into dist/.

npm run build

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality.

License

Copyright (c) 2015 Jason Bellamy
Licensed under the MIT license.