react-codepen
react-codepen copied to clipboard
jasonbellamy
A react component to embed pens from http://codepen.io
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.
Metadata
26
Stars
7
Forks
Watchers
Owner
jasonbellamy
Metadata
A react component to embed pens from http://codepen.io