jQuery

[pjebs]

I got jSignature to work with React.js. I still needed jQuery as a dependency.

What is the jSignature.min.noconflict.js files? Is that a non-jquery version which I can use with React?

[brinley]

Nope, unfortunately there is no non-jQuery version. Noconflict version is to allow loading of multiple JS libraries in addition to jQuery in the event that the other libraries introduce incompatibilities such as overriding $

[nealeu]

I've managed to get jSignature to work under some circumstances, but not others (such as in a Bootstrap modal). Perhaps it would be better to do a native ReactJS version of jSignature (I've not found one that does SVG output so far).

[pjebs]

@nealeu I use it in exactly that situation (inside a Bootstrap modal).

Here is my code:

[pjebs]

$('#modal-pay-now').on('show.bs.modal', function (e) {
    //Mount react component
    ReactDOM.render(<FormView />,document.getElementById('react-form'));
});

$('#modal-pay-now').on('hidden.bs.modal', function (e) {
    //Unmount react component
    ReactDOM.unmountComponentAtNode(document.getElementById('react-form'));
});

componentDidMount: function() {
        //Initialize the jsignature
        $(this.refs.signature).jSignature();

        //Detect if customer has signed
        $(this.refs.signature).bind('change', function(e){
            /* 'e.target' will refer to div with "#signature" */ 
            var datapair = $(this.refs.signature).jSignature("getData","base30");  // returns array of [mimetype, string of jSignature's custom Base30-compressed format]
            this.props.sign(datapair[1]); //Signify that customer has agreed and save data as base30
        }.bind(this));

    },

    componentWillUnmount: function() {
        //Do clean up work here - perhaps save 
    },

[nealeu]

Thanks. I'd got things working eventually but I think your approach is cleaner.