React-codepen NPM

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 react-component codepen editor embed

@everything-registry/sub-chunk-2545

0.1.0

9 years ago