react-codepen's Introduction

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

react-codepen's People

Contributors

Stargazers

Watchers

react-codepen's Issues

Codepen embed version

Hi there!

I was trying to get a layout like the following done and was not able to:

Come to find out it's because of two things:

embed-version=2 (it seems like something Codepen now allows)
default-tab="js,result" (it seems that now Codepen allows more than one result to be passed at a time)

Here is a sample embed code:

<iframe height='266' scrolling='no' src='//codepen.io/sergiocruz/embed/ZWmvYb/?height=266&theme-id=dark&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/sergiocruz/pen/ZWmvYb/'>Convert React component from Class to Stateless Function</a> by Sergio Cruz (<a href='http://codepen.io/sergiocruz'>@sergiocruz</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>