README

React Tether 2

Simple react wrapper around Tether from Hub Spot.

Installation

npm install react-tether2 --save

Usage

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import tether from 'react-tether2';

@tether(
  function (ownProps) {
    return {
      target: ownProps.target(),
      attachment: 'bottom left',
      targetAttachment: 'top left',
      constraints: [
        {
          to: 'scrollParent',
          attachment: 'together'
        }
      ]
    }
  }
)
class Source extends Component {
  render() {
    return (
      <div style={style}>
        Tether Source
      </div>
    );
  }
}

class App extends Component {
  getTarget = () => this.refs.target;

  render() {
    return (
      <div>
        <div ref="target">Tether Target</div>
        <Source target={this.getTarget}/>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.body);

tether([options], [mapStateToProps], [props])

options(ownProps): options (Function)

mapStateToProps(state, ownProps, tether): props (Function)

The state is what tether usually provides as classes:

elementAttachedLeft
elementAttachedRight
elementAttachedTop
elementAttachedBottom
elementAttachedMiddle
elementAttachedCenter
targetAttachedLeft
targetAttachedRight
targetAttachedTop
targetAttachedBottom
targetAttachedMiddle
targetAttachedCenter

props (Object)

Props passed to the wrapper component. For instance, pass the style prop to provide custom styling like zIndex to the tethered component.

Usage no npm install needed!