react-runkit

RunKit Embed Component.

Install

Install the package:

``sh
$ npm i -S react-runkit
`

Add the RunKit embed library to your page:

`html

...

...

`

Usage

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

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

module.exports = class HelloEmbed extends React.Component {
render() {
return
}
}
`

![](http://i.imgur.com/7mH8e6o.png)

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

Props

$3

Specify the source code that the notebook will use.

`js
console.log('Hello, world!') } />
`

$3

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

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

$3

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

`js
exports.endpoint = (req, res) => res.end('Hello, world!') } mode='endpoint' />
`

$3

Request a version or semver range for the node engine.

`js
console.log('Hello, world!') nodeVersion='7' } />
`

$3

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

`js
Hello, ${ process.env.FIRSTNAME } ${ process.env.LASTNAME }!' } env={ ['FIRSTNAME=Haskell', 'LASTNAME=Curry'] } />
`

$3

Provide a title for the notebook when opened on RunKit.

`js
console.log('Hello, world!') } title='Hello World' />
`

$3

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

`js
console.log('Hello, world!') } minHeight='200px' />
`

$3

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

`js
require('babel-core') } packageTimestamp={ 1468195200000 } />
`

$3

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

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

$3

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

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

$3

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

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

$3

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

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

Methods

$3

Evaluate the notebook.

$3

Retrieve the URL of the notebook.

Tips

$3

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