Skip to content

Commit cb144cb

Browse files
author
tleunen
committed
initial commit
0 parents  commit cb144cb

File tree

6 files changed

+161
-0
lines changed

6 files changed

+161
-0
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Mac crap
2+
.DS_Store
3+
4+
# NodeJS
5+
node_modules/

‎LICENSE.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014 Tommy Leunen
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
13+
all 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
21+
THE SOFTWARE.

‎README.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# react-gist
2+
3+
[![NPM](https://nodei.co/npm/react-gist.png)](https://nodei.co/npm/react-gist/)
4+
5+
Use this component to add a github gist on your website.
6+
7+
Get the id from the gist url `https://gist.github.com/{your_name}/{id}` and set it as a property of the component.
8+
9+
## Example
10+
11+
```js
12+
var React = require('react');
13+
var Gist = require('react-gist');
14+
15+
React.render(
16+
<Gist id='5104372' />,
17+
document.body
18+
);
19+
```
20+
21+
## Usage
22+
23+
### `<Gist id={string} />`
24+
25+
- `id` {string} Id of the gist
26+
27+
## demo
28+
29+
To run the demo, install beefy and browserify:
30+
31+
`npm i beefy browserify -g`
32+
33+
Then:
34+
35+
`npm run demo`
36+
37+
## License
38+
39+
MIT, see [LICENSE.md](http://github.com/tleunen/react-gist/blob/master/LICENSE.md) for details.

‎demo/index.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var React = require('react');
2+
var Gist = require('../index');
3+
4+
var g = React.render(
5+
<Gist id='5104372' />,
6+
document.body
7+
);
8+
9+
// update the gist after 5 seconds
10+
setTimeout(function() {
11+
g.setProps({id: '4702818'});
12+
}, 5000);

‎index.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
"use strict";
2+
3+
var React = require('react');
4+
5+
var Gist = React.createClass({
6+
propTypes: {
7+
id: React.PropTypes.string.isRequired
8+
},
9+
10+
shouldComponentUpdate: function(nextProps) {
11+
return this.props.id !== nextProps.id;
12+
},
13+
14+
componentDidMount: function() {
15+
this._updateIframeContent();
16+
},
17+
componentDidUpdate: function(prevProps, prevState) {
18+
this._updateIframeContent();
19+
},
20+
21+
_updateIframeContent: function() {
22+
var iframe = this.refs.iframe.getDOMNode();
23+
24+
var doc = iframe.document;
25+
if (iframe.contentDocument) doc = iframe.contentDocument;
26+
else if (iframe.contentWindow) doc = iframe.contentWindow.document;
27+
28+
var gistScript = '<script type="text/javascript" src="https://gist.github.com/' + this.props.id + '.js"></script>';
29+
var styles = '<style>*{font-size:12px;}</style>';
30+
var resizeScript = 'onload="parent.document.getElementById(\'gist-' + this.props.id + '\').style.height=document.body.scrollHeight + \'px\'"';
31+
var iframeHtml = '<html><head><base target="_parent">'+styles+'</head><body '+resizeScript+'>'+gistScript+'</body></html>';
32+
33+
doc.open();
34+
doc.writeln(iframeHtml);
35+
doc.close();
36+
},
37+
38+
render: function() {
39+
return React.DOM.iframe({
40+
ref: 'iframe',
41+
width: '100%',
42+
frameBorder: 0,
43+
id: "gist-" + this.props.id
44+
});
45+
}
46+
});
47+
48+
module.exports = Gist;

‎package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "react-gist",
3+
"version": "0.0.0",
4+
"description": "Github Gist React component",
5+
"main": "index.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "git://github.com/tleunen/react-gist.git"
9+
},
10+
"bugs": {
11+
"url": "https://github.com/tleunen/react-gist/issues"
12+
},
13+
"homepage": "https://github.com/tleunen/react-gist",
14+
"keywords": [
15+
"react",
16+
"react-component",
17+
"gist",
18+
"github",
19+
"iframe"
20+
],
21+
"author": {
22+
"name": "Tommy Leunen",
23+
"email": "[email protected]",
24+
"url": "http://tommyleunen.com/"
25+
},
26+
"license": "MIT",
27+
"dependencies": {
28+
"react": "^0.12.0"
29+
},
30+
"devDependencies": {
31+
"reactify": "^0.15.2"
32+
},
33+
"scripts": {
34+
"demo": "beefy demo/index.js --open -- -t reactify"
35+
}
36+
}

0 commit comments

Comments
 (0)