React applying JQuery code to an element inside a component

Question

I have an application where I'm using React. I have a problem now where I'm trying to implement the bootstrap-wysiwyg/bootstrap3-wysiwyg package.

In order to get my <textarea> to work as the ootstrap-wysiwyg/bootstrap3-wysiwyg text editor I need to run the following JQuery function on the text editor:

$(".textarea").wysihtml5()

Here's my component:

import React, { Component } from 'react'

export class MyTextEditor extends Component {
    render() {
        return (
            <div className="form-group">
                <textarea className="textarea"></textarea>
            </div>
        )
    }
}

How can I apply that JQuery function to my <textarea> in the React component?

I know it's not very good practice to blend React and JQuery but I really need this to work. If there is an alternative method to getting the package to work I would appreciate that as an answer instead.

Otherwise if anyone can help me get this to work it would be much appreciated!

Update: (Still looking)

Thanks for all the suggestions. I've tried a bunch but they've all led to problems:

<ReactQuill> just doesn't display well at all, buttons are gigantic.
<EditableDiv> gives me: Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
Syam Mohan's answer gives me: Uncaught TypeError: Cannot read property 'font-styles' of undefined at f

Still in search for something that will work, thank you for all the efforts so far!

I'd take a look at any react versions first and see if you can use them or not. — Martin Dawson
– Martin Dawson, Commented Dec 26, 2016 at 13:25
I had some trouble implementing <ReactQuill />. I should mention that my text editor is appearing on a modal. The ReactQuill buttons are giant. — Barry Michael Doyle
– Barry Michael Doyle, Commented Dec 26, 2016 at 13:57
@MartinMazzaDawson using <EditableDiv> gave me the following error: Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. Not sure where that comes from, but basically if I use <EditableDiv> the error occurs, if not my app runs without error. — Barry Michael Doyle
– Barry Michael Doyle, Commented Dec 26, 2016 at 14:12
When a library modifies the DOM, we try to keep React out of it's way. You need to create a component to manage the jQuery plugin, mostly by using the componentDidMount/componentWillUnmount to initialize/destroy the third party library. See my answer here: stackoverflow.com/a/40350880/1333836 — Kaloyan Kosev
– Kaloyan Kosev, Commented Dec 26, 2016 at 20:40

Syam Mohan M P · Accepted Answer · 2016-12-26 14:08:51Z

3

Try this:

import React, { Component } from 'react';
import $ from 'jquery'; 

export class MyTextEditor extends Component {

  componentDidMount() {
    $(".textarea").wysihtml5()
  }

  render() {
    return (
        <div className="form-group">
            <textarea className="textarea"></textarea>
        </div>
     )
  }
}

NOTE: Do not forget to add JQuery library

edited Dec 26, 2016 at 14:08

answered Dec 26, 2016 at 13:07

Syam Mohan M P

1,0679 silver badges23 bronze badges

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

4 Comments

Facundo La Rocca Over a year ago

Syam Mohan, can you explain how to add jQuery library to React app? Thanks.

Barry Michael Doyle Over a year ago

Doing that gives me the following error in the console: Uncaught TypeError: Cannot read property 'font-styles' of undefined at f

degr Over a year ago

how to add jQuery library to React app? - import $ from jquery. But this is not good approach. Please see my comment below OP post

nmgeek Over a year ago

You can clear up the 'font-styles' error by switching to the bootstrap3-wysiwyg-commonjs fork of the boostrap-wysiwyg package: github.com/sharathprabhal/bootstrap3-wysiwyg-commonjs . See github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/issues/207

mgouault · Accepted Answer · 2016-12-26 15:52:29Z

0

To add and import JQuery is the first part.

1) Using webpack the best way I saw was to add a plugin in your webpack.config.js:

var webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

All these different typos are here to make JQuery availability compatible with all kinds of modules. Of course you need to npm install jquery and your plugin (wysihtml5).

2) Or you could import it in your index.html: <script src="jquery-3.1.1.min.js"></script>

EDIT: 3) Using meteor I did meteor add jquery and that did the trick.

Then, second part is to use it in React.

To use a jquery plugin on an element you need it to be rendered first, that's why you need to put the code in componentDidMount (which is run after the first render). And I would advise you (based on my different search when I had to do the same thing as you but with bootstrapTable) to make the render part the most simple (by removing ) and to use ReactDOM.findDOMNode(this) as a selector for JQuery:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export class MyTextEditor extends Component {

    componentDidMount() {
        $(ReactDOM.findDOMNode(this)).wysihtml5()
    }

    render() {
        return (
            <textarea className="textarea"></textarea>
        )
    }
}

EDIT: Or to use React's refs

import React, { Component } from 'react'

export class MyTextEditor extends Component {

    componentDidMount() {
        $(this.refs.textareaIWantToUse).wysihtml5()
    }

    render() {
        return (
            <div className="form-group">
                <textarea className="textarea" ref="textareaIWantToUse"></textarea>
            </div>
        )
    }
}

edited Dec 26, 2016 at 15:52

answered Dec 26, 2016 at 15:46

mgouault

777 bronze badges

8 Comments

Barry Michael Doyle Over a year ago

I'm using Meteor so it's a bit different, the <textarea> is apart of a form so I'd prefer to keep it in the component that I set it in.

mgouault Over a year ago

I edited the post accordingly, I add this issue with meteor too

Barry Michael Doyle Over a year ago

I shall let you know once I've checked that this solution works.

Barry Michael Doyle Over a year ago

So this updated answer gives me the following error: Exception from Tracker recompute function: TypeError: $(...).wysihtml5 is not a function

mgouault Over a year ago

Which scripts are you including in your project / html ? On github.com/jhollingworth/bootstrap-wysihtml5 it says to add wysihtml5, jquery, bootstrap and bootstrap-wysihtml5, one of them could be missing.

|

Collectives™ on Stack Overflow

React applying JQuery code to an element inside a component

2 Answers 2

4 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related