@anomen/react-tether

React Tether


React wrapper around Tether from Hub Spot.

!alt tag

Install

npm install react-tether --save

bower install react-tether --save

Example Usage

``javascript
import TetherComponent from 'react-tether'

class SimpleDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
isOpen: false
}
}

render() {
const { isOpen } = this.state

return(
attachment="top center"
constraints={[{
to: 'scrollParent',
attachment: 'together'
}]}
>
{ / First child: This is what the item will be tethered to / }
{this.setState({isOpen: !isOpen})}}>
Toggle Tethered Content

{ / Second child: If present, this item will be tethered to the the first child / }
{
isOpen &&



}

)
}
}
`

Props

#### children: PropTypes.node.isRequired (2 Max)

The first child is used as the Tether's target and the second child (which is optional) is used as Tether's element that will be moved.

#### renderElementTag: PropTypes.string

The tag that is used to render the Tether element, defaults to div.

#### renderElementTo: PropTypes.string

Where in the DOM the Tether element is appended. Passes in any valid selector to document.querySelector. Defaults to document.body.

#### Tether Options:

Any valid Tether options.

Run Example

clone repo

git clone git@github.com:souporserious/react-tether.git

move into folder

cd ~/react-tether

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/`