Integrating with Other Libraries

Because of its tiny size and modular nature, it's easy to use with many other third-party libraries and frameworks. You can use Material Design Lite, Bootstrap, jQuery, Redux, Mobx, Lodash, Ramda, etc.

The only thing to be aware of is markup. If you are using JSX, any markup must respect the rule of well-formedness. This means that all HTML self-closing tags will have to be escaped in the render function with a forward slash:

wrong          correct
----------------------
<br>           <br/>
<hr>           <hr/>
<img>          <img/>
<input>        <input/>
<col>          <col/>
<param>        <param/>
<link>         <link/>
<meta>         <meta/>

Material Design Lite

Material Design Lite is a popular frame that enbles you to use Google Material Design styles and controls from Android as the basis for a Web application. Implementation is really easy. Just include the Material Design Lite resources in out project and import them in your index.html file. Or you could just load them from a CDN.

Here's an example of a Hello World using MDL. It has a dropdown menu in the right:

See the Pen Composi MDL-2 by Robert Biggs (@rbiggs) on CodePen.

Literally, it's just a question of using the Material Design Lite classes on the markup that a component creates for Material Design Lite to initialize dynamic components. Since we've imported the resources to implement a Material Design dialog in our index.html file, let's see how to use it. We'll make a component that creates a Material Design Lite card that has a button to show a dialog. The MDL dialogs work, the markup uses the HTML tag dialog. This is not supported by older browsers, hence our need for the dialog polyfill that we have inported above. The dialog itself is static markup for now. We output it with the card. The card button will show the dialog:

See the Pen Composi MDL-3 by Robert Biggs (@rbiggs) on CodePen.

And, here is an example of some form inputs and a list:

See the Pen Composi MDL-4 by Robert Biggs (@rbiggs) on CodePen.

Bootstrap

Now let's see how to use Bootstrap with Composi. Like we did with Material Design Lite, we need to import the Bootstrap resources into our index.html file.

Here we have a Jumbotron with a drop down menu. Notice how we had to unwrap the props in the end. That's because each time you nest a function component using JSX that passes props down, the props get wrapped in another enclosing object. Because we have our Bootstrap resources load, we can just output this markup from our component:

See the Pen Composi Bootstrap by Robert Biggs (@rbiggs) on CodePen.

jQuery

In our example with Bootstrap we already demonstrated using a jQuery plugin with Composi. It's that simple.

A jQuery plugin can be used on the same page as Composi, and even inside a Composi component, as we did with Bootstrap, as long as the plugin is not going to modify the DOM structure. Remember, it's Composi's job to manage your app's DOM. If you need to use a jQuery plugin that does manage the DOM structure, use it outside of your Composi components.

Communicating between jQuery and Composi

You might have a jQuery plugin whose state you want to track in a Composi component, or vise-a-versa. Depending on the API of the plugin, you might be able to do this by using a pubsub library. These are tiny and powerful for communication between disparate components.

Redux & Mobx

We already have a tutorial on how to use Redux and Mobx with Composi.