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'; @ { return <div => Tether Source </div> ; } thisrefstarget; { return <div> <div ="target">Tether Target</div> <Source =/> </div> ; } ReactDOM;
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.