0.3.5 • Published 7 years ago
react-tether2 v0.3.5
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.
0.3.5
7 years ago
0.3.4
7 years ago
0.3.3
7 years ago
0.3.2
7 years ago
0.3.1
7 years ago
0.3.0
7 years ago
0.2.0
7 years ago
0.1.17
7 years ago
0.1.16
7 years ago
0.1.15
8 years ago
0.1.14
8 years ago
0.1.13
8 years ago
0.1.12
8 years ago
0.1.11
8 years ago
0.1.10
8 years ago
0.1.9
8 years ago
0.1.8
8 years ago
0.1.7
8 years ago
0.1.6
8 years ago
0.1.5
8 years ago
0.1.4
8 years ago
0.1.3
8 years ago
0.1.2
8 years ago
0.1.1
8 years ago
0.1.0
8 years ago