react-tether

WebJar for react-tether

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

react-tether
Last Version

Last Version

0.5.2
Release Date

Release Date

Type

Type

jar
Description

Description

react-tether
WebJar for react-tether
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/souporserious/react-tether

Download react-tether

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/react-tether/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>react-tether</artifactId>
    <version>0.5.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/react-tether/
implementation 'org.webjars.bower:react-tether:0.5.2'
// https://jarcasting.com/artifacts/org.webjars.bower/react-tether/
implementation ("org.webjars.bower:react-tether:0.5.2")
'org.webjars.bower:react-tether:jar:0.5.2'
<dependency org="org.webjars.bower" name="react-tether" rev="0.5.2">
  <artifact name="react-tether" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='react-tether', version='0.5.2')
)
libraryDependencies += "org.webjars.bower" % "react-tether" % "0.5.2"
[org.webjars.bower/react-tether "0.5.2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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

As of version 2, a minimum of React 16.3 is required. If you need support for React < 16.3 please use the 1.x branch.

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',
          },
        ]}
        /* renderTarget: This is what the item will be tethered to, make sure to attach the ref */
        renderTarget={ref => (
          <button
            ref={ref}
            onClick={() => {
              this.setState({ isOpen: !isOpen });
            }}
          >
            Toggle Tethered Content
          </button>
        )}
        /* renderElement: If present, this item will be tethered to the the component returned by renderTarget */
        renderElement={ref =>
          isOpen && (
            <div ref={ref}>
              <h2>Tethered Content</h2>
              <p>A paragraph to accompany the title.</p>
            </div>
          )
        }
      />
    );
  }
}

Props

renderTarget: PropTypes.func

This is a render prop, the component returned from this function will be Tether's target. One argument, ref, is passed into this function. This is a ref that must be attached to the highest possible DOM node in the tree. If this is not done the element will not render.

renderElement: PropTypes.func

This is a render prop, the component returned from this function will be Tether's element, that will be moved. If no component is returned, the target will still render, but with no element tethered. One argument, ref, is passed into this function. This is a ref that must be attached to the highest possible DOM node in the tree. If this is not done the element will not render.

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.

children:

Previous versions of react-tether used children to render the target and component, using children will now throw an error. Please use renderTarget and renderElement instead

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)}
  renderTarget={ref => <Target ref={ref} />}
  renderElement={ref => (
    <Element ref={ref} onResize={() => this.tether && this.tether.position()} />
  )}
/>

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/

Versions

Version
0.5.2