-
Notifications
You must be signed in to change notification settings - Fork 69
/
index.js
97 lines (92 loc) · 2.82 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import styled, { createGlobalStyle } from 'styled-components';
import ThemeProvider from './components/theme';
import Body from './components/body';
import Page from './components/page';
import PageTitle from './components/page-title';
import Section from './components/section';
import { InlineCode, CodeBlock } from './components/code';
import Link from './components/link';
import Demo from './components/demo';
const GlobalStyle = createGlobalStyle`
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
`;
/* eslint-enable no-unused-expressions */
const HidesOnMobileSection = styled(Section)`
@media (max-width: 390px) {
display: none;
}
`;
class App extends Component {
render() {
return (
<ThemeProvider>
<Body>
<GlobalStyle />
<Page>
<PageTitle>React Tether</PageTitle>
<Section>
<p>
A React wrapper around{' '}
<Link href="https://github.com/hubspot/tether">Tether</Link>{' '}
from Hub Spot.
</p>
<nav>
<Link href="https://github.com/danreeves/react-tether">
GitHub
</Link>
{' ● '}
<Link href="https://npmjs.com/package/react-tether">npm</Link>
{' ● '}
<Link href="http://tether.io/#options">Tether docs</Link>
</nav>
</Section>
<Section>
<h2>Installation</h2>
<InlineCode>npm i react-tether</InlineCode>
</Section>
<Section>
<h2>Usage</h2>
<CodeBlock>
{`
import TetherComponent from 'react-tether';
const TetheredThing = () => (
<TetherComponent
attachment="middle left"
renderTarget={ref => (
<p ref={ref}>The target component</p>
)}
renderElement={ref => (
<p ref={ref}>The tethered component</p>
)}
</TetherComponent>)
`}
</CodeBlock>
</Section>
<HidesOnMobileSection>
<h2>Demo</h2>
<Demo />
</HidesOnMobileSection>
<Section>
<br />
<p>
For more documentation see the{' '}
<Link href="https://github.com/danreeves/react-tether#props">
readme
</Link>
.
</p>
</Section>
</Page>
</Body>
</ThemeProvider>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));