Force ripple via props?

[mshwery]

I was hoping I could achieve forcing the ripple to appear (centered as requested in #22) programmatically. This would enable one to use the focus state on a button to have the ripple appear and then disappear on blur.

[nhunzaker]

I like this. What kind of API would you like to see here? One idea is to use refs and methods on the Ink component itself:

React.createClass({
  triggerRipple() {
    // I'm thinking a percentage value between 0 and 1
    // to prevent the need to know about the dimensions of the canvas for x/y
    this.refs.ink.trigger({ x: 0.5, y: 0.5 })
  },
  render() {
    return (
      <button onMouseOver={ this.triggerRiple }><Ink ref="ink" /></button>
    )
  }
})

Hmm. Maybe even a hold/release mechanism, something like:

const ripple = this.refs.ink.press({ x: 0.5, y: 0.5 })

setTimeout(function() {
  ripple.release()
}, 500)

What would work best for your app?

[mshwery]

I haven't studied the internals of react-ink enough to know what best fits the current structure but IMO an approach like this would be best:

import React from 'react';
import Ink from 'react-ink';

const Button = (props) => (
  <button>
    <Ink touched={true}/>
  </button>
);

You could imagine that a boolean prop like touched would force the ripple to appear. The ripple internally could handle prop changes to transition from having touched={true} to touched={false}.

One could also assume centered coordinates for the ripple if not are specified, which I think might be the common use case.

To elaborate on the above example, here's how I would use it:

import React from 'react';
import Ink from 'react-ink';

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.onBlur = this.onBlur.bind(this);
    this.onFocus = this.onFocus.bind(this);
  }

  onBlur(event) {
    this.setState({ hasFocus: false });
  }

  onFocus(event) {
    this.setState({ hasFocus: true });
  }

  render() {
    const inkProps = {};

    if (this.state.hasFocus) {
      inkProps.touched = this.state.hasFocus;
    }

    return (
      <button onBlur={this.onBlur} onFocus={this.onFocus}>
        <Ink {...inkProps}/>
      </button>
    );
  }
}

This example will set the touched prop to true only when the button has focus. When it no longer has focus the entire prop is removed (as opposed to passing false) so that normal clicking behavior will resume on Ink.

[mshwery]

Your suggestion might be easier to work – but I've traditionally avoid externalizing methods on components.

[nhunzaker]

@mshwery Sorry for the delay. I like that better myself.

[nhunzaker]

And I like to send my comments too early!

I'm happy to crank on this, however I probably won't be able to get to it until next week.