├── .gitignore ├── .travis.yml ├── contributing.md ├── license ├── package.json ├── src └── react-codepen.js ├── readme.md └── dist └── react-codepen.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | test/tmp/ 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | - '0.12' 5 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. 3 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Jason Bellamy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-codepen", 3 | "description": "A react component to embed pens from codepen.io", 4 | "version": "0.1.0", 5 | "homepage": "https://github.com/jasonbellamy/react-codepen", 6 | "author": { 7 | "name": "Jason Bellamy", 8 | "email": "j@sonbellamy.com", 9 | "url": "http://jasonbellamy.com" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/jasonbellamy/react-codepen.git" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/jasonbellamy/react-codepen/issues" 17 | }, 18 | "license": "MIT", 19 | "main": "dist/react-codepen", 20 | "engines": { 21 | "node": ">= 0.10.0" 22 | }, 23 | "scripts": { 24 | "build": "babel -d dist src", 25 | "clean": "rm -rf dist && mkdir dist", 26 | "watch": "babel -w -d dist src", 27 | "preversion": "npm run clean && npm run build", 28 | "postpublish": "git push && git push --tag" 29 | }, 30 | "devDependencies": { 31 | "babel": "^5.8.9", 32 | "core-js": "^0.9.6", 33 | "react": "^0.13.3" 34 | }, 35 | "keywords": [ 36 | "react", 37 | "react-component", 38 | "codepen", 39 | "editor", 40 | "embed" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /src/react-codepen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Codepen = React.createClass({ 4 | 5 | propTypes: { 6 | user: React.PropTypes.string.isRequired, 7 | hash: React.PropTypes.string.isRequired, 8 | height: React.PropTypes.string, 9 | width: React.PropTypes.string, 10 | tab: React.PropTypes.oneOf(['html', 'css', 'result', 'js']), 11 | theme: React.PropTypes.string 12 | }, 13 | 14 | getDefaultProps () { 15 | return { 16 | height: '250px', 17 | width: '100%', 18 | tab: 'result', 19 | theme: '0' 20 | }; 21 | }, 22 | 23 | render () { 24 | const src = `//codepen.io/${this.props.user}/embed/${this.props.hash}/?height=${this.props.height}&theme-id=${this.props.theme}&default-tab=${this.props.tab}`; 25 | const user = `http://codepen.io/${this.props.user}`; 26 | const pen = `${user}/pen/${this.props.hash}/`; 27 | 28 | return ( 29 | 32 | ); 33 | } 34 | }); 35 | 36 | export default Codepen; 37 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # React <Codepen> 2 | 3 | > A react component to embed pens from [codepen.io](http://codepen.io) 4 | 5 | 6 | ## Getting Started 7 | 8 | - Install with [NPM](https://www.npmjs.org/) - `npm install --save react-codepen` 9 | 10 | 11 | ## Usage 12 | 13 | ```javascript 14 | var React = require('react'); 15 | var Codepen = require('react-codepen'); 16 | 17 | var Component = React.createClass({ 18 | render: function () { 19 | return ( 20 | 21 | ); 22 | } 23 | }); 24 | ``` 25 | 26 | 27 | ## Options 28 | 29 | 30 | Property | Type | Argument | Values | Default | Description 31 | ---------|----------|--------------|--------------------------|-----------|------------ 32 | user | `string` | `` | | `null` | [codepen.io](http://codepen.io) username. 33 | hash | `string` | `` | | `null` | the hash id of the pen to display. 34 | height | `string` | `` | `px, %` | `250px` | the height of the pen. 35 | width | `string` | `` | `px, %` | `100%` | the width of the pen. 36 | tab | `string` | `` | `css, html, js, result` | `result` | the default tab that should be displayed. 37 | theme | `string` | `` | | `default` | the theme the pen should use. 38 | 39 | 40 | ## Developing 41 | 42 | [react-codepen](https://github.com/jasonbellamy/react-codepen) is built using **ES6**. Run the following task to compile the `src/` into `dist/`. 43 | 44 | ```bash 45 | npm run build 46 | ``` 47 | 48 | 49 | ## Contributing 50 | In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. 51 | 52 | 53 | ## License 54 | Copyright (c) 2015 [Jason Bellamy ](http://jasonbellamy.com) 55 | Licensed under the MIT license. 56 | -------------------------------------------------------------------------------- /dist/react-codepen.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { 4 | value: true 5 | }); 6 | 7 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var Codepen = _react2['default'].createClass({ 14 | displayName: 'Codepen', 15 | 16 | propTypes: { 17 | user: _react2['default'].PropTypes.string.isRequired, 18 | hash: _react2['default'].PropTypes.string.isRequired, 19 | height: _react2['default'].PropTypes.string, 20 | width: _react2['default'].PropTypes.string, 21 | tab: _react2['default'].PropTypes.oneOf(['html', 'css', 'result', 'js']), 22 | theme: _react2['default'].PropTypes.string 23 | }, 24 | 25 | getDefaultProps: function getDefaultProps() { 26 | return { 27 | height: '250px', 28 | width: '100%', 29 | tab: 'result', 30 | theme: '0' 31 | }; 32 | }, 33 | 34 | render: function render() { 35 | var src = '//codepen.io/' + this.props.user + '/embed/' + this.props.hash + '/?height=' + this.props.height + '&theme-id=' + this.props.theme + '&default-tab=' + this.props.tab; 36 | var user = 'http://codepen.io/' + this.props.user; 37 | var pen = user + '/pen/' + this.props.hash + '/'; 38 | 39 | return _react2['default'].createElement( 40 | 'iframe', 41 | { width: this.props.width, height: this.props.height, scrolling: 'no', src: src, frameBorder: 'no', allowTransparency: 'true', allowFullScreen: 'true', style: { height: this.props.height, width: this.props.width } }, 42 | _react2['default'].createElement( 43 | 'a', 44 | { href: pen }, 45 | 'See this pen' 46 | ), 47 | ' by ', 48 | this.props.user, 49 | ' (', 50 | _react2['default'].createElement( 51 | 'a', 52 | { href: user }, 53 | '@', 54 | this.props.user 55 | ), 56 | ') on ', 57 | _react2['default'].createElement( 58 | 'a', 59 | { href: 'http://codepen.io' }, 60 | 'CodePen' 61 | ), 62 | '.' 63 | ); 64 | } 65 | }); 66 | 67 | exports['default'] = Codepen; 68 | module.exports = exports['default']; --------------------------------------------------------------------------------