Cfrgtkky

This is how it goes: I'm trying to integrate FontAwesome IconPicker (a jQuery plugin) into a React project I'm working on.

This is what I've got so far:

import '../../../node_modules/fontawesome-iconpicker/dist/js/fontawesome-iconpicker';

import $ from 'jquery';



class IconControl extends Component {



    componentDidMount() {

        this.$el = $( this.el );

        this.$el.iconpicker();



        this.handleChange = this.handleChange.bind( this );

        this.$el.on( 'change', this.handleChange );

    }



    componentDidUpdate( prevProps ) {

        if ( prevProps.icon !== this.props.icon ) {

            this.$el.trigger( 'iconpicker:updated' );

        }

    }



    componentWillUnmount() {

        this.$el.off( 'change', this.handleChange );

        this.$el.iconpicker( 'destroy' );

    }



    handleChange(e) {

        this.props.onChange( e.target.value );

    }



    render() {



        const {

            attributes: {

                icon,

                description,

            },

        } = this.props;



        return (

            <input

                type="text"

                value={ icon }

                ref={ el => this.el = el }

            />

        );

    }



}



export default IconControl;

I've read React's documentation regarding integrating with other libraries, but I still can't get a clear picture on how to achieve this. I've managed to make the icon select menu show up and select an icon from it, but I have no idea how to work with this particular plug-in and React to store that data.

Any guidance will be more than appreciated :)