How to use JavaScript with $ inside render() in Reactjs

Question

I work on content editor in React admin interface. And I'd love to install my favorite block content editor. But it's an old one and have no react version.

I know how to link .js and .css in head with ReactHelmet

But have no idea how to run following script:

<script>
    $(function () {
      $("#editor").brickyeditor({
        ignoreHtml: true,
        blocksUrl: 'data.json',
        templatesUrl: 'templates.html',
        onChange: function(data) {
          console.log(data.html);
        }
      });
    });
 </script>

Here is initial html structure


<body>
  <header>
    <nav class="container navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="index.html">BrickyEditor</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div id="editor"></div>
        </div>
      </div>
    </div>
    </div>
  </main>
</body>

Im using it like so:

import PageTitle from "../components/common/PageTitle";
import Helmet from "react-helmet";
import $ from 'jquery'; 

class NewsEditor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {

      };
  }

  render() {
    const {

    } = this.state;

    return (
        <Container fluid className="main-content-container px-4">
            {/* Page Header */}
            <Row noGutters className="page-header py-4">
                <PageTitle sm="4" title="News editor" subtitle="Drag and drop interface" className="text-sm-left" />
            </Row>
            <Helmet 
                title="Nested Title"
                link={[
                        {"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.css"}                        
                    ]}
                script={[
                  {"src": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.js"}, 
                ]}

                />  
            <header>

            <script>
                $(function () {
                $("#editor").brickyeditor({
                    ignoreHtml: true,
                    blocksUrl: 'data.json',
                    templatesUrl: 'templates.html',
                    onChange: function(data) {
                    console.log(data.html);
                    }
                });
                });
            </script>

                <nav class="container navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="index.html">BrickyEditor</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
                    </li>
                    </ul>
                </div>
                </nav>
            </header>
            <main>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="editor"></div>
                        </div>
                    </div>
                </div>
            </main>



        </Container>
    );
  }
}




export default NewsEditor;

On this stage all I have is Failed to compile error.

UPD: Following advices I keep on getting TypeErrors

Possible duplicate of [How to use JQuery with ReactJS](https://stackoverflow.com/questions/38518278/how-to-use-jquery-with-reactjs) — Emile Bergeron, Aug 01 '19 at 14:09

score 1 · Answer 1 · answered Aug 01 '19 at 14:09

1

I always make re-usable components for external libraries. So in your case, it would be BrickyEditor component which could look like this:

class BrickyEditor extends React.Component {
  editorRef = React.createRef();

  componentDidMount() {
    window.$(this.editorRef.current).brickyeditor(this.props);
  }

  render() {
    return <div ref={this.editorRef}></div>
  }
}

// in your NewsEditor component you can use it like so
<BrickyEditor
  ignoreHtml={true}
  blocksUrl="data.json"
  templatesUrl="templates.html"
  onChange={function(data) {
    console.log(data.html);
  }}
/>

answered Aug 01 '19 at 14:09

Chris

6,331
1
21
25

1

With jQuery plugins, most of the time, you want to avoid rerendering since you lose the context each time, it flashes, it slows down the page, etc. Not sure what the Bricky Editor will do, but re-rendering is the challenge with jQuery inside of React. – Emile Bergeron Aug 01 '19 at 14:24
2

I agree we use mostly use this pattern for video players. – Chris Aug 01 '19 at 14:33
Thank you @Christiaan for your answer! Now I have this new error: TypeError: window.$ is not a function – Konstantin Bashenko Aug 02 '19 at 11:39
What I do now is import {$, window} from "jquery", but after that I'm getting "TypeError: Cannot read property '$' of undefined" on the same line – Konstantin Bashenko Aug 02 '19 at 11:47
1

If you are using jQuery by imports, you can remove the `window` part. – Chris Aug 02 '19 at 12:06
Ok @Christiaan , so now this part looks like this, `componentDidMount() { $(this.editorRef.current).brickyeditor(this.props); }` but now I get error `TypeError: Object(...) is not a function` – Konstantin Bashenko Aug 02 '19 at 12:46

How to use JavaScript with $ inside render() in Reactjs

1 Answers1