thanhvuong / react-tether2

Simple react wrapper around Tether from Hub Spot

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.