title: Passing ref via props in React to prevent duplication of commonly used functionality
body: <p>I have a 5 different button components, all of which are styled very different from one another and require different props to render. One piece of functionality that I would like all 5 components to have is that after they have been clicked the button loses focus (using <code>.blur()</code>). I have a :focus style for accessibility reasons, but after a button is clicked I need to lose the :focus style.</p>
  
  <p>Rather than me write the exact same functionality across all 5 buttons it makes sense for me to create a separate component to handle this functionality.</p>
  
  <p>I'm new to React so haven't had to do anything like this before so would like to know the best way of tackling the problem as I have read that passing ref via props is a good way of identifying an anti-pattern, but with my current knowledge of React it seems to be the only way of achieving what I want.</p>
  
  <p>If I were to do this inside of one of the Button components which is then rendered on a page it would look like this:</p>
  
  <pre><code>const Page = () =&gt; {
    const loseFocus = () =&gt; {
      this.btn.blur();
    };
  
    return (
      &lt;Button
        onClick={loseFocus}
        ref={(btn) =&gt; { this.btn = btn; }}
      &gt;
        Toggle
      &lt;/Button&gt;
    );
  };
  
  const Button = props =&gt; (
    &lt;button onClick={props.onClick}&gt;
      {props.children}
    &lt;/button&gt;
  );
  </code></pre>
  
  <p>I don't want to have to do this for every Button component I ever include though, ideally I would have every button automatically lose focus after being clicked.</p>
  
  <p>If I were to do something like this in jQuery I could just target all <code>.btn</code> elements (which is a common class shared by all 5 components) with an event listener like so:</p>
  
  <pre><code>$('.btn').on('click', function() {
   $(this).blur(); 
  };
  </code></pre>
  
  <p>I know I could do something very similar in plain javascript but would this be going against React best practice?</p>