Using with React?

[YanDoroshenko]

Is there a way to use YASQE from a React environment?

[LaurensRietveld]

There shouldnt be any limitation on using it in a react environment. Some thoughts:

• If you have server-side rendering, you should exclude the YASQE package from being rendered on the server (the main dependency of yasqe, codemirror, requires a document and window reference, that won't be there in nodejs)
• You'd probably need to draw an empty div in your render function, and and a ref to it. That way, you can use that div as argument when instantiating yasqe (something like <div ref={el => (this.yasguiWrapper = el)}/>
• You should probably add the yasqe initialization to the componentDidMount lifecycle method
• You might need to add a this.yasqe.refresh() in the componentDidUpdate lifecycle method (changing other parts in the component, or e.g. navigating back and forth in your react app, might result in a gray yasqe query area. I think this is caused by codemirror that applies some JS magic to draw position some elements. A yasqe.refresh would fix this).

Closing this, but let me know how it goes

[YanDoroshenko]

I managed to add a normal textarea and then to do a YASQE.fromTextArea(e.target).setValue(value) to create an editor from it on focus. Seems to work alright. Thanks.

[YanDoroshenko]

@LaurensRietveld One more question - is there a way to add a change listener to the editor? I need to notify other components every time the value of the editor changes.

[LaurensRietveld]

Yasqe extends the codemirror functionality (see https://codemirror.net/doc/manual.html). Some functionality that codemirror offers is the on change event (yasqe.on('change', function(){})). That should help you here

[YanDoroshenko]

@LaurensRietveld Just what I needed! Awesome, thanks!

[jrenee42]

@YanDoroshenko please post a full example of how you got it working; thanks!

[YanDoroshenko]

@jrenee42 Here you go:

import YASQE from "yasgui-yasqe";

const yasqe = YASQE.fromTextArea(e.target);
yasqe.setValue(value);
yasqe.on('change', () => {
    props.onChange(yasqe.getValue());
});

[jrenee42]

@YanDoroshenko what is 'value' (setValue(value))

more context/more code please; the more the better! (i am new to react)

[YanDoroshenko]

@jrenee42 setValue is a method to set the value of the YASQE editor. value is just some local variable declared earlier. It has nothing to do with React. I can't give you any more code or context as it was a part of a big framework and seeing the code would confuse you even more. Try creating a textarea and then triggering the code I've written - initializing YASQE and such (I've done it on focus).

[jrenee42]

thanks, i've since got it working.

[D063520]

Hi @jrenee42,

I'm also struggeling with this, could you post your integration. For me it is not working currently ...

Currently I have this:

componentDidMount(){
       const s = document.createElement('script');
        s.src = "http://cdn.jsdelivr.net/npm/yasgui@2.7.29/dist/yasgui.min.js"; 
       this.instance.appendChild(s); 
      const s2 = document.createElement('script'); 
       s2.type = 'text/javascript'; 
      s2.innerHTML = "var yasgui = YASGUI(document.getElementById(\"showcase\"));"; 
}

render() { 
       return ( 
          <div > 
               <div ref={el => (this.instance = el)} > 
                    <div id='showcase'/> 
                </div>; 
            </div> 
        ); 
} 

But at runtime I get ReferenceError: Can't find variable: YASGUI

Thank you D063520

[D063520]

Hi,

this is my second version:

’’’ constructor(props) { super(props); var yasqe = null; var yasr = null; }

componentDidMount() { this.yasqe = YASQE.fromTextArea(document.getElementById("yasqe"), { sparql: { showQueryButton: true } }); this.yasqe.refresh(); }

render() {
    console.log("Sparql endpoint");
    return (
        <div >
            <div>
                <textarea id="yasqe"></textarea>
                <div id="yasr"></div>
            </div>
        </div>
    );
}

’’’

The problem here is that I get the gray area you described in the first post (even if I add this.yasqe.refresh();). After expanding to full screen and expanding back it renders right. Any clue?