No clue on howto use it

[danielecr]

I want to make accordion, how do i do it? var ReactAccordion = require('react-jqueryui').Accordion

in a class:

UNMOUNTED

sure, it's wrong, but how wrong?

[barbalex]

+1 there needs to be an example how to use it

[jenschr]

+1

[aliakakis]

Based on the excellent code by Pete Hunt I just made some miniscule changes.

I hope that someone might find this useful.

Copy/paste the code below in a new file with whatever name you desire e.g. ReactJQueryUI.js

var React = require('react');
var shallowEqual = require('react/lib/shallowEqual');

function wrapWidget(name) {
    var displayName = 'React' + name[0].toUpperCase() + name.slice(1);

    return React.createClass({
        render: function() {
            return (
                <div>
                    {this.props.children}
                </div>
            );
        },

        componentDidUpdate: function(prevProps) {
            if (!shallowEqual(prevProps, this.props)) {
                this._runPlugin();
            }
        },

        componentDidMount: function() {
            this._runPlugin();
        },

        _runPlugin: function() {
            var $node = $(React.findDOMNode(this));
            $node[name](this.props);
            this.$ = $node;
        },

        displayName: displayName
    });
}

var WIDGETS = {
    Accordion: 'accordion',
    Autocomplete: 'autocomplete',
    Button: 'button',
    DatePicker: 'datepicker',
    Draggable: 'draggable',
    Droppable: 'droppable',
    Menu: 'menu',
    ProgressBar: 'progressbar',
    Resizable: 'resizable',
    Selectable: 'selectable',
    Sortable: 'sortable',
    Slider: 'slider',
    Spinner: 'spinner',
    Tabs: 'tabs',
    Tooltip: 'tooltip'
};

var ReactJQueryUI = {};

for (var key in WIDGETS) {
    ReactJQueryUI[key] = wrapWidget(WIDGETS[key]);
}

module.exports = ReactJQueryUI;

Require it as usual based on the folder you saved it and in order to use any jQuery UI component just wrap the element you wish inside your jsx code and as pass as props the options of the widgets API as follows:

<ReactJQueryUI.Draggable helper="clone">
    <div ref="headerTitle" className="input-field col s12 center">
        <h5 className="header center orange-text">Admin Console</h5>
    </div>
</ReactJQueryUI.Draggable>

[ghost]

@aliakakis Thanks! This helped using 'sortable'. Have you tried this using the Accordion?

[aliakakis]

@trevorwaddell I have to admit that I haven't. I was more interested in the draggable and dropable widgets. Is the Accordion not behaving as normal?

[ghost]

@aliakakis It's not working for me. The Accordion is tricky because it has a couple of different parts (header and contents). So I'm not sure, I could be wrapping the wrong elements.

[aliakakis]

@trevorwaddell

You are right. It needs investigation.

[ghost]

@aliakakis The code example you provided works. With a small modification (see code below).

I think my problem is the how I specify the option. I want to use a div instead of an h3. This works normally, but not in react so far.

$(function() { $("#accordion").accordion({ header: ".accordionHeader", // using this instead of "h3" active: false, collapsible: true, heightStyle: "content" }); });

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

$(function() { $("#accordion").accordion({ header: ".accordion", active: false, collapsible: true, heightStyle: "content" }); });

[aliakakis]

@trevorwaddell

Have you tried the following:

<ReactJQueryUI.Accordion header=".accordionHeader">
</ReactJQueryUI.Accordion>

The trick is to pass as props all the API related options.