jQuery UI control в React на примере FormBuilder

jQuery UI — симпатичная библиотека. У неё есть недостатки — она тяжелее Boot­strap и довольно старая. Но бывает, что нужный компонент есть только под неё. А у тебя проект на одном из React-фреймворков…

Для примера попробуем подключить старый jQuery Form­Builder. Это просто отличный редактор форм.

Конечно, есть другие. Есть даже редактор форм под React… но он использует доисторические библиотеки и отныне не собирается. А их тех, которые собираются, Form­Builder — самый наглядный. В него не страшно пустить даже неопытного пользователя.

Но увы… большинство React-фреймворков давным-давно jQuery-free. Как же нам подключить компонент?

Для начала идём в package.json и добавляем туда form­Builder. К счастью, он уже собран в виде npm-пакета, так что нам не нужно упоминать про jQuery и прочие зависимости. NPM их и так подтянет.

  "dependencies": {
    // ...
    "formBuilder": "^2.9.8",
    // ...
}

А потом создаём новый компонент и пишем:

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

class FormBuilder extends Component {
  state = { };

  componentDidMount() {
    window.jQuery = $;
    window.$ = $;
    require('jquery-ui-sortable');
    require('formBuilder');
    this.$formBuilderContainer = $(this.refs.formBuilderEditor);
    this.$formBuilderEditor = this.$formBuilderContainer.formBuilder({
        i18n: {
          locale: 'ru-RU'
        }
      });
  }
  render() {
    return (
             <div ref="formBuilderEditor"></div>
            );
    }
}

export default FormBuilder;

Добавляем на нужную страницу, запускаем… и видим, что форма на месте и даже кнопки нажимаются!