<commit_before>## [React in patterns](../../README.md) / Third-party integration

* [Source code](https://github.com/krasimir/react-in-patterns/tree/master/patterns/third-party/src)

---

React is probably one of the best choices for building UI. Good design, support and community. However, there are cases where we want to use an external service or we want to integrate something completely different. We all know that React works heavily with the actual DOM and basically controls what's rendered on the screen. That's why integrating of third-party components could be tricky. In this article we will see how to mix React and jQuery's UI plugin and do it safely.

## The example

I picked [tag-it](https://github.com/aehlke/tag-it) jQuery plugin for my example. It transforms an unordered list to input field for managing tags:

![tag-it](./img/tag-it.png)

To make it work we have to include jQuery, jQuery UI and the tag-it plugin code. It works like that:

```jsx
$('<dom element selector>').tagit();
```

We select a DOM element and call `tagit()`.

Now, let's create a simple React app that will use the plugin:
<commit_msg>Third-party integration updates<commit_after>## [React in patterns](../../README.md) / Third-party integration

* [Source code](https://github.com/krasimir/react-in-patterns/tree/master/patterns/third-party/src)

---

React is probably one of the best choices for building UI. Good design, support and community. However, there are cases where we want to use an external service or we want to integrate something completely different. We all know that React works heavily with the actual DOM and basically controls what's rendered on the screen. That's why integrating of third-party components could be tricky. In this article we will see how to mix React and jQuery's UI plugin and do it safely.

## The example

I picked [tag-it](https://github.com/aehlke/tag-it) jQuery plugin for my example. It transforms an unordered list to input field for managing tags:

```html
<ul>
  <li>JavaScript</li>
  <li>CSS</li>
</ul>
```

to:

![tag-it](./img/tag-it.png)

To make it work we have to include jQuery, jQuery UI and the tag-it plugin code. It works like that:

```jsx
$('<dom element selector>').tagit();
```

We select a DOM element and call `tagit()`.

Now, let's create a simple React app that will use the plugin:

{'fraction_non_alphanumeric': 0.1016156462585034, 'fraction_numerical': 0.0, 'mean_word_length': 4.093073593073593, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '642804', 'n_tokens_mistral': 667, 'n_tokens_neox': 648, 'n_words': 320}