RunKit Embed Component.
Install the package:
$ npm i -S react-runkitAdd the RunKit embed library to your page:
<head>
...
<script src='https://embed.runkit.com'></script>
...
</head>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.
Specify the source code that the notebook will use.
<Embed source={ `console.log('Hello, world!')` } />If true, the user will not be able to edit or run the embed.
<Embed source={ `console.log('Hello, world!')` } readOnly={ true } />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' />Request a version or semver range for the node engine.
<Embed source={ `console.log('Hello, world!')` nodeVersion='7' } />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'] } />Provide a title for the notebook when opened on RunKit.
<Embed source={ `console.log('Hello, world!')` } title='Hello World' />Provide a minimum height for the embed ('130px' by default).
<Embed source={ `console.log('Hello, world!')` } minHeight='200px' />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 } />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')` } />Provide a callback that is run when the embed is loaded.
<Embed source={ `console.log('Hello, world!')` } onLoad={ this.alertLoaded.bind(this) } />Provide a callback that is run whenever the embed's URL changes.
<Embed source={ `console.log('Hello, world!')` } onLoad={ this.alertURLChanged.bind(this) } />Provide a callback that is run whenever the embed is evaluated.
<Embed source={ `console.log('Hello, world!')` } onLoad={ this.alertEvaluated.bind(this) } />Evaluate the notebook.
Retrieve the URL of the notebook.
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) } />
)
}
}