React-Runkit and setState()

1

We are using the react-runkit and would like to grab the contents of the code pane onEvaluate() to set the local state! Sample code below- we would like to grab the source="" onEvaluate to setState inside our handler!

Anyone have any ideas?

module.exports = class Runkit extends React.Component {
    constructor(){
        super();
        this.state={
            code:''
        };
        this.handleChange=this.handleChange.bind(this);
    }
    handleChange(event){
        console.log('blargh',event.target.value);
    }
    alertEvaluated(){
        console.log('hi');
    }
    render() {
        return <Embed source={ helloSource } readOnly={ false } onEvaluate={ this.alertEvaluated.bind(this) } />
    }
}
2

Thanks for reaching out, @alicewonderland!

I just went ahead and added support for this feature to react-runkit. Once we merge in this minor feature and republish it, I’ll write back to let you know!

Pieter

3

Hi @pieter! Thanks so much! We were looking into all sorts of options to grab the source! And I was just about to take a look at the embed code to see if I could make sense of it!

This is even better!
TYSM!

4

Hi @pieter,

I am also trying to access the getURL() method already available in the module. I followed the example in the docs but can’t seem to access it. In the render() I tried binding it to the onEvaluate() where I use the this.refs.embed.getURL(). What am I missing? Here is the code:

module.exports = class Runkit extends React.Component {
    constructor() {
        super();
            this.state = {
            code: '',
        };
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange (event) {
        console.log('blargh',event.target.value);
    }
    alertEvaluated(event) {
        console.log('hi', this.source, event);
        this.refs.embed.getURL();
    }
    render() {
        return <Embed source={helloSource} readOnly={false} ref="embed" } onEvaluate={this.alertEvaluated.bind(this)} />;
    }
}
5

Sorry the above getURL() question is resolved!

6

Hey @alicewonderland. Thanks so much for your patience!

I just merged in the fix from Friday, so you can start using it. We decided not to bump the version and publish a new release yet since we’re about to publish a new version of react-runkit with the APIs that RunKit embeds already support.

To start using this version, you can simply install this commit hash. I’ll update here for your reference when we do publish this to npm, which is hopefully quite soon. (I know this isn’t ideal, but I don’t want to hold you up any longer!).

  1. Remove the existing version:
    npm remove --save react-runkit
    or
    yarn remove react-runkit

  2. Install this version with the Git hash before we bump the version:
    npm install --save git://github.com/runkitdev/react-runkit#1783cfa52352da7a824b2569781c5ce3bcca4943
    or
    yarn add git://github.com/runkitdev/react-runkit#1783cfa52352da7a824b2569781c5ce3bcca4943

Now that you have the latest version of this package, you can use the getSource method:

module.exports = class Runkit extends React.Component {
    constructor() {
        super();
            this.state = {
            code: '',
        };
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        console.log('blargh',event.target.value);
    }
    alertEvaluated(){
        // (this.source and event are undefined, but we can update state in the callback below) 
        console.log('hi', /* this.source, event */);
        this.refs.embed.getSource((code) => this.setState({ code }));
    }
    render() {
        return <Embed source={ helloSource } readOnly={ false } onEvaluate={ this.alertEvaluated.bind(this) } ref="embed" />
    }
}

Let me know if you have any other questions!

1 Like
7

Hi @pieter!

I see it in the code. Will follow the instructions to uninstall and reinstall and let you know how it goes!

Thanks again and much appreciated!

8

I was able to check it out and implement it! It works great! Thanks!

We are eventually going to try and implement a shared code editor so more than one person can code into the same console. And have been looking for some ideas on how to handle an onchange. For now we’ve attached it to the onEvaluate!

If you have any ideas, please let me know!
And thanks again!