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

Emile Bergeron
– Emile Bergeron

2019-08-01 14:09:43 +00:00
Commented Aug 1, 2019 at 14:09 — Emile Bergeron
– Emile Bergeron, Commented Aug 1, 2019 at 14:09
please add more detail, preferrably make a live example.

Peter
– Peter

2019-08-01 14:09:59 +00:00
Commented Aug 1, 2019 at 14:09 — Peter
– Peter, Commented Aug 1, 2019 at 14:09

Chris · Accepted Answer · 2019-08-01 14:09:57Z

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 1, 2019 at 14:09

Chris

6,6911 gold badge25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Emile Bergeron Over a year ago

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.

Chris Over a year ago

I agree we use mostly use this pattern for video players.

Konstantin Bashenko Over a year ago

Thank you @Christiaan for your answer! Now I have this new error: TypeError: window.$ is not a function

Konstantin Bashenko Over a year ago

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

Chris Over a year ago

If you are using jQuery by imports, you can remove the window part.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related