diff --git a/README.md b/README.md index 0b8e93d..4eacde1 100644 --- a/README.md +++ b/README.md @@ -16,13 +16,10 @@ Get the id from the gist url `https://gist.github.com/{your_name}/{id}` and set Single-file gist: ```js -var React = require('react'); -var Gist = require('react-gist'); +var React = require("react"); +var Gist = require("react-gist"); -React.render( - , - document.body -); +React.render(, document.body); ``` [](https://codesandbox.io/s/reactgistexamplesinglefile-z9vkc?fontsize=14) @@ -30,12 +27,12 @@ React.render( Multi-file gist: ```js -var React = require('react'); -var Gist = require('react-gist'); +var React = require("react"); +var Gist = require("react-gist"); React.render( - , - document.body + , + document.body ); ``` @@ -43,10 +40,11 @@ React.render( ## Usage -### `` +### `` - `id` {string} Id of the gist - `file` {string} Name of a specific file in a multi-file gist +- `title` {title} Specific name of the tag ## License diff --git a/demo/src/index.js b/demo/src/index.js index a6c0348..2a5feb6 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -1,32 +1,39 @@ -import React, {Component} from 'react' -import {render} from 'react-dom' +import React, { Component } from "react"; +import { render } from "react-dom"; -import Gist from '../../src' +import Gist from "../../src"; class Demo extends Component { constructor(props) { super(props); this.state = { - id: 'bedde975e6e92a77e2321487ba45f313', - file: null + id: "bedde975e6e92a77e2321487ba45f313", + file: null, + title: null, }; } componentDidMount() { // update the gist after 5 seconds setTimeout(() => { - this.setState({id: '5995ea726914f280afb3', file: 'Chef-Dockerfile'}); + this.setState({ + id: "5995ea726914f280afb3", + file: "Chef-Dockerfile", + title: "Chef Dockerfile", + }); }, 5000); } render() { - return - React-Gist - The following gist will be updated in 5 seconds - - + return ( + + React-Gist + The following gist will be updated in 5 seconds + + + ); } } -render(, document.querySelector('#demo')) +render(, document.querySelector("#demo")); diff --git a/src/index.js b/src/index.js index 96180b0..99ce48f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React from "react"; +import PropTypes from "prop-types"; class Gist extends React.PureComponent { componentDidMount() { @@ -13,7 +13,7 @@ class Gist extends React.PureComponent { _defineUrl() { const { id, file } = this.props; - const fileArg = file ? `?file=${file}` : ''; + const fileArg = file ? `?file=${file}` : ""; return `https://gist.github.com/${id}.js${fileArg}`; } @@ -27,9 +27,9 @@ class Gist extends React.PureComponent { if (iframe.contentDocument) doc = iframe.contentDocument; else if (iframe.contentWindow) doc = iframe.contentWindow.document; - const gistLink = this._defineUrl() + const gistLink = this._defineUrl(); const gistScript = ``; - const styles = ''; + const styles = ""; const elementId = file ? `gist-${id}-${file}` : `gist-${id}`; const resizeScript = `onload="parent.document.getElementById('${elementId}').style.height=document.body.scrollHeight + 'px'"`; const iframeHtml = `${styles}${gistScript}`; @@ -40,14 +40,17 @@ class Gist extends React.PureComponent { } render() { - const { id, file } = this.props; + const { id, file, title } = this.props; return ( { this.iframeNode = n; }} + ref={(n) => { + this.iframeNode = n; + }} width="100%" frameBorder={0} id={file ? `gist-${id}-${file}` : `gist-${id}`} + title={title} /> ); } diff --git a/types/index.d.ts b/types/index.d.ts index 562cff1..3031fe0 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -3,6 +3,7 @@ import { PureComponent } from "react"; export interface GistProps { id: string; file?: string; + title?: string; } declare class Gist extends PureComponent {}
The following gist will be updated in 5 seconds