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:

1. <ReactQuill> just doesn't display well at all, buttons are gigantic.
2. <EditableDiv> gives me: Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.
3. 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!

Answer 1

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>
        )
    }
}

Answer 2

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