RunKit Embed Component.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example use destroy method Jun 23, 2017
src
.babelrc
.gitignore
README.md
package.json
runkit-example.js
webpack.js
yarn.lock

README.md

react-runkit

RunKit Embed Component.

Install

Install the package:

$ npm i -S react-runkit

Add the RunKit embed library to your page:

<head>
    ...
    <script src='https://embed.runkit.com'></script>
    ...
</head>

Usage

const React = require('react')
const Embed = require('react-runkit')

const helloSource = `console.log('Hello, world!')`

module.exports = class HelloEmbed extends React.Component {
    render() {
        return <Embed source={ helloSource } />
    }
}

Don't forget to check out the RunKit embed docs.

Props

source : string

Specify the source code that the notebook will use.

<Embed source={ `console.log('Hello, world!')` } />

readOnly : boolean

If true, the user will not be able to edit or run the embed.

<Embed source={ `console.log('Hello, world!')` } readOnly={ true } />

mode : string

If 'endpoint', the notebook will be run as an endpoint and a link to the served page will be shown.

<Embed source={ `exports.endpoint = (req, res) => res.end('Hello, world!')` } mode='endpoint' />

nodeVersion : string

Request a version or semver range for the node engine.

<Embed source={ `console.log('Hello, world!')` nodeVersion='7' } />

env : [string]

Provide a list of environment variables accessible in the notebook through process.env.

<Embed source={ 'console.log(`Hello, ${ process.env.FIRSTNAME } ${ process.env.LASTNAME }!`' } env={ ['FIRSTNAME=Haskell', 'LASTNAME=Curry'] } />

title : string

Provide a title for the notebook when opened on RunKit.

<Embed source={ `console.log('Hello, world!')` } title='Hello World' />

minHeight : string

Provide a minimum height for the embed ('130px' by default).

<Embed source={ `console.log('Hello, world!')` } minHeight='200px' />

packageTimestamp : number

Specify the Unix time in milliseconds at which packages should resolved. Packages published after the date will be ignored.

<Embed source={ `require('babel-core')` } packageTimestamp={ 1468195200000 } />

preamble : string

Specify source code that is run before the main source. This code will not be shown in the embed.

<Embed source={ `console.log(_.map(_.add(1), [1, 2, 3]))` } preamble={ `const _ = require('lodash/fp')` } />

onLoad : function

Provide a callback that is run when the embed is loaded.

<Embed source={ `console.log('Hello, world!')` } onLoad={ this.alertLoaded.bind(this) } />

onURLChanged : function

Provide a callback that is run whenever the embed's URL changes.

<Embed source={ `console.log('Hello, world!')` } onLoad={ this.alertURLChanged.bind(this) } />

onEvaluate : function

Provide a callback that is run whenever the embed is evaluated.

<Embed source={ `console.log('Hello, world!')` } onLoad={ this.alertEvaluated.bind(this) } />

Methods

evaluate(callback : function) : void

Evaluate the notebook.

getURL() : string

Retrieve the URL of the notebook.

Tips

Autorun Embed

class App extends React.Component {
    run() {
        this.refs.embed.evaluate()
    }
    render() {
        return (
            <Embed source={ `console.log('Hello, world!')` } ref='embed' onLoad={ this.run.bind(this) } />
        )
    }
}