React Tether

React wrapper around Tether from Hub Spot.

Install

npm install react-tether --save

bower install react-tether --save

Example Usage

importTetherComponentfrom'react-tether'classSimpleDemoextendsReact.Component{constructor(props){super(props)this.state={isOpen: false}}render(){const{ isOpen }=this.statereturn(<TetherComponentattachment="top center"constraints={[{to: 'scrollParent',attachment: 'together'}]}>{/* First child: This is what the item will be tethered to */}<buttononClick={()=>{this.setState({isOpen: !isOpen})}}>
Toggle Tethered Content
</button>{/* Second child: If present, this item will be tethered to the the first child */}{isOpen&&<div><h2>Tethered Content</h2><p>A paragraph to accompany the title.</p></div>}</TetherComponent>)}}

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.

Imperative API

The following methods are exposed on the component instance:

• getTetherInstance(): Tether
• disable(): void
• enable(): void
• on(event: string, handler: function, ctx: any): void
• once(event: string, handler: function, ctx: any): void
• off(event: string, handler: function): void
• position(): void

Example usage:

<TetherComponentref={tether=>this.tether=tether}><Target/><ElementonResize={()=>this.tether&&this.tether.position()}
</TetherComponent>

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/