react-component-ref

Simple helper class to help you stay DRY (Don't repeat yourself)

ComponentRef is a small helper class which should help you stay as much DRY as possible and encourage you to add refs to your react Components when it's necessary (when you need it or a third party library needs access to native element). (see Refs to Components if you haven't already)

Install

Install with npm:

$ npm install react-component-ref

Usage

JavaScript

// before

class Before extends React.Component {
  constructor(props) {
    super(props);
    this.inputName = null;
    this.inputPass = null;
    this.refName = (input) => {
      this.inputName = input;
      input.focus();
    }
    this.refInput = (input) => this.inputPass = input;
    this.onChange = (event) => this.inputName.select();
  }
  
  render() {
    return (
      <form name="login">
        <input name="name" ref={this.refName} onChange={this.onChange}/>
        <input name="pass" ref=(this.refPass} />
      <form>
    );
  }
}

// after

import ComponetRef from 'react-component-ref';

class After extends React.Component {
  constructor(props) {
    super(props);
    this.inputName = new ComponentRef((input) => input.focus());
    this.inputPass = new ComponentRef();
    this.onChange = (event) => this.inputName.getComponent().select();
  }
  
  render() {
    return (
      <form name="login">
        <input name="name" ref={this.inputName.ref} onChange={this.onChange}/>
        <input name="pass" ref=(this.inputPass.ref} />
      <form>
    );
  }
}

TypeScript

// before

class Before extends React.Component<any, any> {
  private inputName: HTMLInputElement;
  private inputPass: HTMLInputElement;
  private refName: (input: HTMLInputElement) => void;
  private refPass: (input: HTMLInputElement) => void;
  private onChange: React.FromEventHandler;
  
  public constructor(props: any) {
    super(props);
    this.inputName = null;
    this.inputPass = null;
    this.refName = (input: HTMLInputElement): void => {
      this.inputName = input;
      input.focus();
    }
    this.refInput = (input: HTMLInputElement): void => this.inputPass = input;
    this.onChange = (event: React.FormEvent): void => this.inputName.select();
  }
  
  render() {
    return (
      <form name="login">
        <input name="name" ref={this.refName} onChange={this.onChange}/>
        <input name="pass" ref=(this.refPass} />
      <form>
    );
  }
}

// after

import ComponetRef from 'react-component-ref';
import bind from 'bind-decorator'; // Optional 

class After extends React.Component<any, any> {
  private inputName: ComponetRef<HTMLInputElement>;
  private inputPass: ComponetRef<HTMLInputElement>;
  
  @bind
  private onChange(event: React.FormEvent): void {
    this.inputName.getComponent().select();
  }
  
  public constructor(props: any) {
    super(props);
    this.inputName = new ComponentRef<HTMLInputElement>((input: HTMLInputElement) => input.focus());
    this.inputPass = new ComponentRef<HTMLInputElement>();
  }
  
  public render(): JSX.Element {
    return (
      <form name="login">
        <input name="name" ref={this.refName.ref} onChange={this.onChange}/>
        <input name="pass" ref=(this.refPass.ref} />
      <form>
    );
  }
}

Testing

1. npm install

2. npm test

Contributing

1. npm install

2. Make changes

3. If necessary add some tests to __tests__

4. npm test

5. Make a Pull Request