joaovieira / react-tether Goto Github PK

import TetherComponent from 'react-tether'

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

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

    return(
      <TetherComponent
        attachment="top center"
        constraints={[{
          to: 'scrollParent',
          attachment: 'together'
        }]}
      >
        { /* First child: This is what the item will be tethered to */ }
        <button onClick={() => {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>
    )
  }
}

<TetherComponent ref={tether => this.tether = tether}>
  <Target/>
  <Element onResize={() => this.tether && this.tether.position()}
</TetherComponent>