react-tether2
v0.3.5
Published
Simple react wrapper around Tether from Hub Spot
Downloads
89
Maintainers
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.