JSPM – react-tether@0.1.0

Package Exports

react-tether
react-tether/lib/react-tether

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tether) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Tether 0.1.0

React wrapper around Tether lib from Hub Spot.

Install

npm install react-tether --save

bower install react-tether --save

Example Usage

import TetherElement from 'react-tether'

class App extends Component {
  state = {
    isOpen: false,
    vertical: 'left',
    horizontal: 'top'
  }

  render() {
    return(
      const { isOpen, vertical, horizontal } = this.state

      <div>
        <button
          ref="target"
          onClick={() => {this.setState({isOpen: !isOpen})}}
        >
          Toggle Tethered Content
        </button>
        {
          isOpen &&
          <TetherElement
            target={this.refs.target}
            options={{
              attachment: `${vertical} ${horizontal}`,
              constraints: [
                {
                  to: 'scrollParent',
                  attachment: 'together'
                }
              ]
            }}
          >
            <div>
              <h2>Tethered Content</h2>
              <p>A paragraph to accompany the title.</p>
            </div>
          </TetherElement>
        }
      </div>
    )
  }
}

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/