hgill hgill - 10 months ago 78
Javascript Question

React Custom Component - Button - Call JQuery plugin on OnClick event

I want to add legitRipple.js to a custom React Button click event.
link to legitRipple JS: https://matthias-vogt.github.io/legitRipple.js/

Here is my draft but it is not working - I don't know how to link the click event and the reference to .ripple() event

Button = class Button extends React.Component {
constructor(props) {
this.onClick = this.onClick.bind(this);
this.state = {

componentDidMount() {
//need to add JQuery function - on button click, I need to register an event? or somehow call (ref=buttonEl) $(buttonEl).ripple();


//do I need an componentWillUnmount as well?

onClick(ev) {
let onClickFn = this.props.onClick;
onClickFn && onClickFn(ev);
//somehow register an event to show the ripple?
render() {
return (
<button type="button" ref="buttonEl" className={this.props.className} onClick={this.onClick.bind(this)}>


You can access your button element using this.refs.buttonEl, and that should allow you to do a $(this.refs.buttonEl).ripple() to install the ripple handler on that element.

From the documentation, it looks like the element should automatically ripple when clicked. Doesn't look like you have to call anything during onClick to make that happen.

You probably want to do a $(this.refs.buttonEl).ripple({unbind: true}); in your componentWillUnmount. You may also need to remove the event handler during componentWillUpdate and attach it during componentDidUpdate.