0.5.6 • Published 8 years ago
@anomen/react-tether v0.5.6
React Tether
React wrapper around Tether from Hub Spot.
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 Options
:
Any valid Tether options.
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/
0.5.6
8 years ago