react-jquery-ui

React wrappers around jQuery UI widgets

Wait, What? Why?

jQuery haters gonna say these widgets have no place in React code. Why use jQuery when there's probably a number of suitable open source solutions? The stigma against commingling jQuery with React code primarily stems from the fact that they're both UI libraries and both seek control over DOM elements.

The React docs provide some decent examples of how 3rd party libraries can peacefully co-exist with bossy React code. But people are still understandably a bit sketched out by the practice. And while you could roll your own datepicker or find an open source react UI library... why re-invent the wheel if you just need something basic?

This library is for everyone who would like to use jQuery UI elements (the good one's) in their React code, but don't want to deal with the set up and teardown involved. All the components in this library are controlled-ish. They operate more or less like any other controlled input elements. That means React sets the values, listens for the interactions, etc. No jQuery selectors involved (unless you're into that) and they mostly look and feel just like any other React component.

Installation

npm i --save react-jquery-ui

OR

yarn add react-jquery-ui

I dunno why there are only two options. You could always alias one of these commands to something more interesting like rainbow-inject <my package>...

Greatest Hits

• Autocomplete
• Progress Bar
• Datepicker
• Tooltip
• Slider

The rest of the jQuery UI elements kinda just suck and you're unlikely to find them in any legacy code (someone just cried...) so I didn't even bother with them, but if there's one you find useful let me know (or better yet, copy the source examples and help me make jQuery great again).

Getting Started

The jQuery UI Widgets API docs will give you a good idea of what other options you can pass to these components as props. Generally speaking most of the options for all of these components are exactly the same as the values you'd be passing to your jQuery widget. However, the event handlers are accessible via new methods prefixed with an on e.g. onChange, onClose, etc.

Tooltip

The tooltip component adds a tooltip to the first child inside of it. The most basic usage would be to pass it a content prop and you're done.

const Example = () =>
    <Tooltip content="A Light to Help You Find Your Way" >
        <div>What's This?</div>
        <p>No tooltip for me!</p>
    </Tooltip>

However, maybe you'd like to dynamically change the text inside this tooltip depending on a condition. We can do that since the content prop will update the Tooltip. Let's set a timer and countdown from 30.

import {Tooltip} from 'react-jquery-ui';

class Example extends Component {
    state = {
        countdown: 30
    }

    interval = setInterval(()=>{
        if (this.state.countdown === 0) {
            clearInterval(this.interval);
            return;
        }
        this.setState((prevState)=>{
            return {
                countdown: prevState.countdown - 1
            }
        })
    }, 1000);
    
    render() {
        return (
            <Tooltip 
                content={`${(this.state.countdown).toString()} seconds left`}
            >
                <div>How many seconds are left?</div>
            </Tooltip>
        )
    }
}

Slider

class Example extends Component {
    state = {
        value: 0
    };

    render() {
        return (
            <Slider
                max={50}
                value={this.props.value}
                onSlide={value => 
                    this.setState({
                        value
                    })
                }
            />
        )
    }
}

The event is stripped out so we can call our value whatever we want and update state accordingly. Setting the state updates the slider and gracefully passes the value back down to jQuery.

Datepicker

By default a Datepicker will appear as a static datepicker without a text input for modifying and displaying the date. But we can force it to show an input with an optional boolean showInput prop.

class Example extends Component {
    state = {
        value: "2012-12-12",
        error: false
    }
    render() {
        return (
            <>
                <div className={this.state.error ? 'error' : ''}>
                    <Datepicker
                        showInput
                        momentFormat={"YYYY-MM-DD"}
                        dateFormat={"yy-mm-dd"}
                        value={this.state.value}
                        onChange={value => this.setState({value})}
                        onError={error => this.setState({error})}
                    />
                </div>
            </>
        )
    }
}

We set an initial value with a specified format and update our value on change and also send back a boolean value if our jQuery format doesn't match up with our moment format. Refer to this moment cheatsheet and jQuery docs to figure out the right ones to use for this feature.

Autocomplete

Autocomplete works similar to the tooltip in that it will append itself to the first child, but it can only be used on input elements or elements who content is editable.

class Example extends Component {
    state = {
        value: '',
    }
    render() {
        return (
            <Autocomplete
                source={[
                    'JavaScript',
                    'Jaguars',
                    'jQuery',
                    'J-Lo',
                ]}
                onSelect={value => {
                    this.setState({value});
                }}
            >
                <input 
                    type="text" 
                    value={this.state.value}
                    onChange={({target:{value}})=>this.setState({value})}
                />
            </Autocomplete>
        )
    }
}

Hook up an input as a controlled component. Wrap it with an Autocomplete. Pass in an array of options. And update the state of the input via an onSelect callback.

Progress Bar

The progress bar is a pretty dumb component. It has an onComplete callback which you could use to tell whether you're progress is complete. But if you're passing it down a value from React then you already know when it's complete don't you, smartass?

import {ProgressBar} from 'react-jquery-ui';

class Example extends Component {
    state = {
        value: 50,
    }

    render() {
        return (
            <ProgressBar
                max={100}
                value={this.state.value}
            />
        )
    }
}

onRef

If for some reason you need to access the jQuery widget instance DIRECTLY instead of using the provided props. You can do so an onRef callback. You probably should not use this, but is provided as an escape hatch in case you are modifying code that requires it.

import {ProgressBar} from 'react-jquery-ui';

class Example extends Component {
    state = {
        value: 50,
        showButton: true
    }

    haltAndCatchFire = () => {
        setTimeout(()=>{
            clearInterval(this.interval);
            this.$progressbar.progressbar('destroy');
            this.setState({showButton: false});
        }, 5001);

        this.interval = setInterval(() => {
            this.$progressbar
            .progressbar('option', 'value', Math.random()*100);
            this.$progressbar
            .css('background-color', '#'+Math.floor(Math.random()*16777215).toString(16));
        }, 20);
    }

    render() {
        return (
            <>
                <ProgressBar
                    max={100}
                    value={this.state.value}
                    onRef={ref => this.$progressbar = ref}
                />
                {this.state.showButton && 
                    <button onClick={this.haltAndCatchFire}>
                        Do Dangerous Stuff
                    </button>
                }
            </>
        )
    }
}

Epilepsy warning! This somewhat dangerous code will expose the jQuery.fn object via onRef for you to go mental with inside the parent component. Here I added a button that will kick off a function that spastically changes the background color of our progress bar and randomly sets it's value for like 5 seconds before destroying itself in a huff and hiding the button. Basically, don't do shit like this.

FIN

P.S. this package and it's docs are both WIP. I haven't really thought about every use case for these so there are probably bugs and annoying edge cases. Find them and fix them and make jQuery great again.