Skip to content

danreeves/react-tether

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jun 27, 2018
7cebe0d · Jun 27, 2018
May 26, 2018
May 5, 2018
Feb 10, 2018
Jun 27, 2018
May 5, 2018
Mar 24, 2018
Jan 22, 2017
Feb 25, 2018
Jan 6, 2017
Feb 18, 2018
Jun 27, 2018
Jan 6, 2017
Apr 21, 2018
Apr 21, 2018
Jun 27, 2018
Jun 27, 2018
May 18, 2018
Feb 25, 2018
Apr 22, 2018

Repository files navigation

React Tether

Build Status Dependency Status Coverage Status

Sauce Test Status

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.


React wrapper around Tether from Hub Spot.

alt tag

Install

npm install react-tether --save

bower install react-tether --save

Example Usage

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>
    );
  }
}

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 requires this element to be position: static;, otherwise it will default to document.body. See this example for more information.

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:

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

Run Example

clone repo

git clone [email protected]:danreeves/react-tether.git

move into folder

cd ~/react-tether

install dependencies

npm install

run dev mode

npm run demo

open your browser and visit: http://localhost:1234/