Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danreeves/react-tether
React wrapper around Tether
https://github.com/danreeves/react-tether
react reactjs tether
Last synced: 12 days ago
JSON representation
React wrapper around Tether
- Host: GitHub
- URL: https://github.com/danreeves/react-tether
- Owner: danreeves
- License: mit
- Created: 2015-11-08T19:20:21.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2024-02-03T15:27:08.000Z (9 months ago)
- Last Synced: 2024-04-09T16:21:59.056Z (7 months ago)
- Topics: react, reactjs, tether
- Language: TypeScript
- Homepage: https://danreeves.github.io/react-tether/
- Size: 3.36 MB
- Stars: 389
- Watchers: 4
- Forks: 77
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Tether
[](https://app.saucelabs.com/u/react-tether)
> Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com/).
---
React wrapper around [Tether](https://github.com/shipshapecode/tether), a positioning engine to make overlays, tooltips and dropdowns better
## Install
`npm install react-tether`
**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](https://github.com/danreeves/react-tether/tree/1.x).**
## Example Usage
```javascript
import TetherComponent from "react-tether";
class SimpleDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
};
}
render() {
const { isOpen } = this.state;
return (
(
{
this.setState({ isOpen: !isOpen });
}}
>
Toggle Tethered Content
)}
/* renderElement: If present, this item will be tethered to the the component returned by renderTarget */
renderElement={(ref) =>
isOpen && (
Tethered Content
A paragraph to accompany the title.
)
}
/>
);
}
}
```
## Props
#### `renderTarget`: PropTypes.func
This is a [render prop](https://reactjs.org/docs/render-props.html), 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](https://reactjs.org/docs/render-props.html), 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](https://danreeves.github.io/react-tether/tests/renderelementto/) for more information.
#### `Tether Options`:
Any valid [Tether options](https://tetherjs.dev/#usage).
#### `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:
```javascript
(this.tether = tether)}
renderTarget={(ref) => }
renderElement={(ref) => (
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/`