Skip to content

Commit 9e8ceae

Browse files
rkulinskirkulinski
authored
Update docs (#61)
* Rework docs to be compatible with website * Fix tsconfig for basic example * Installation guide
1 parent 44c4205 commit 9e8ceae

File tree

12 files changed

+254
-28
lines changed

12 files changed

+254
-28
lines changed

‎docs/adapters/react-ranger.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: React Router
3+
---
4+
5+
You can install TanStack Router with any [NPM](https://npmjs.com) package manager.
6+
7+
```sh
8+
npm install @tanstack/react-ranger
9+
```

‎docs/api/basic.md renamed to ‎docs/api/react/basic.md

File renamed without changes.

‎docs/api/custom-steps.md renamed to ‎docs/api/react/custom-steps.md

File renamed without changes.

‎docs/api/custom-styles.md renamed to ‎docs/api/react/custom-styles.md

File renamed without changes.

‎docs/api/logarithmic-interpolator.md renamed to ‎docs/api/react/logarithmic-interpolator.md

File renamed without changes.

‎docs/api/update-on-drag.md renamed to ‎docs/api/react/update-on-drag.md

File renamed without changes.

‎docs/config.json

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
{
2+
"docSearch": {
3+
"appId": "FQ0DQ6MA3C",
4+
"apiKey": "8264730bab8a9b7fa6a0c85761d7a3fe",
5+
"indexName": "tanstack"
6+
},
7+
"menu": [
8+
{
9+
"label": "Getting Started",
10+
"children": [
11+
{
12+
"label": "Overview",
13+
"to": "overview"
14+
},
15+
{
16+
"label": "Installation",
17+
"to": "installation"
18+
},
19+
{
20+
"label": "Quick Start",
21+
"to": "quick-start"
22+
}
23+
]
24+
},
25+
{
26+
"label": "Adapters",
27+
"children": [
28+
{
29+
"label": "React",
30+
"to": "adapters/react-ranger"
31+
}
32+
]
33+
},
34+
{
35+
"label": "API",
36+
"children": [
37+
{
38+
"label": "Core API",
39+
"to": "api/core"
40+
}
41+
]
42+
},
43+
{
44+
"label": "React Ranger",
45+
"children": [
46+
{
47+
"label": "Basic",
48+
"to": "api/react/basic"
49+
},
50+
{
51+
"label": "Custom Steps",
52+
"to": "api/react/custom-steps"
53+
},
54+
{
55+
"label": "Custom Styles",
56+
"to": "api/react/custom-styles"
57+
},
58+
{
59+
"label": "Logarithmic Interpolator",
60+
"to": "api/react/logarithmic-interpolator"
61+
},
62+
{
63+
"label": "Update on Drag",
64+
"to": "api/react/update-on-drag"
65+
}
66+
]
67+
},
68+
{
69+
"label": "React Examples",
70+
"children": [
71+
{
72+
"label": "Basic",
73+
"to": "examples/react/basic?file=src%2Fmain.tsx"
74+
},
75+
{
76+
"label": "Custom Steps",
77+
"to": "examples/react/custom-steps?file=src%2Fmain.tsx"
78+
},
79+
{
80+
"label": "Custom Styles",
81+
"to": "examples/react/custom-styles?file=src%2Fmain.tsx"
82+
},
83+
{
84+
"label": "Logarithmic Interpolator",
85+
"to": "examples/react/logarithmic-interpolator?file=src%2Fmain.tsx"
86+
},
87+
{
88+
"label": "Update on Drag",
89+
"to": "examples/react/update-on-drag?file=src%2Fmain.tsx"
90+
}
91+
]
92+
}
93+
]
94+
}

‎docs/installation.md

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
---
2-
name: Installation
3-
route: /installation
2+
title: Installation
43
---
54

6-
# Installation
5+
You can install TanStack Ranger with any [NPM](https://npmjs.com) package manager.
76

8-
Install React Ranger as a dependency using `npm` or `yarn`
7+
Depending on your framework of choice, install one of the following packages:
98

10-
```bash
11-
# NPM
12-
$ npm install react-ranger
13-
14-
# Yarn
15-
$ yarn add react-ranger
16-
```
17-
18-
To import React Ranger:
19-
20-
```js
21-
import { useRanger } from '@tanstack/react-ranger'
22-
```
23-
24-
Once you've installed React Ranger, continue to [Concepts](./concepts) to read more about how to utilize its API
9+
- [React](./adapters/react-ranger)
10+
- Solid (coming soon!)
11+
- Vue (coming soon!)
12+
- Svelte (coming soon!)
13+
- Angular (coming soon!)

‎docs/overview.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: Overview
3+
---
4+
5+
Feature Rich and Lightweight Headless utility, which means out of the box, it doesn't render or supply any actual UI elements. Some of its features include:
6+
7+
- 100% Typesafe
8+
- Lightweight (10kb)
9+
- Easy to maintain
10+
- Extensible
11+
- Not dictating UI
12+
13+
## Let's go!
14+
15+
Enough overview, there's so much more to do with TanStack Ranger. Hit that next button and let's get started!

‎docs/quick-start.md

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Quick Start
3+
---
4+
5+
If you're feeling impatient and prefer to skip all of our wonderful documentation, here is the bare minimum to get going with TanStack Router. We'll use React for this example, but the same principles apply to other frameworks.
6+
7+
```tsx
8+
import React from 'react'
9+
import ReactDOM from 'react-dom'
10+
import { useRanger, Ranger } from '@tanstack/react-ranger'
11+
12+
function App() {
13+
const rangerRef = React.useRef<HTMLDivElement>(null)
14+
const [values, setValues] = React.useState<ReadonlyArray<number>>([
15+
10, 15, 50,
16+
])
17+
18+
const rangerInstance = useRanger<HTMLDivElement>({
19+
getRangerElement: () => rangerRef.current,
20+
values,
21+
min: 0,
22+
max: 100,
23+
stepSize: 5,
24+
onChange: (instance: Ranger<HTMLDivElement>) =>
25+
setValues(instance.sortedValues),
26+
})
27+
28+
return (
29+
<div className="App" style={{ padding: 10 }}>
30+
<h1>Basic Range</h1>
31+
<span>Active Index: {rangerInstance.activeHandleIndex}</span>
32+
<br />
33+
<br />
34+
<div
35+
ref={rangerRef}
36+
style={{
37+
position: 'relative',
38+
userSelect: 'none',
39+
height: '4px',
40+
background: '#ddd',
41+
boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',
42+
borderRadius: '2px',
43+
}}
44+
>
45+
{rangerInstance
46+
.handles()
47+
.map(
48+
(
49+
{
50+
value,
51+
onKeyDownHandler,
52+
onMouseDownHandler,
53+
onTouchStart,
54+
isActive,
55+
},
56+
i,
57+
) => (
58+
<button
59+
key={i}
60+
onKeyDown={onKeyDownHandler}
61+
onMouseDown={onMouseDownHandler}
62+
onTouchStart={onTouchStart}
63+
role="slider"
64+
aria-valuemin={rangerInstance.options.min}
65+
aria-valuemax={rangerInstance.options.max}
66+
aria-valuenow={value}
67+
style={{
68+
position: 'absolute',
69+
top: '50%',
70+
left: `${rangerInstance.getPercentageForValue(value)}%`,
71+
zIndex: isActive ? '1' : '0',
72+
transform: 'translate(-50%, -50%)',
73+
width: '14px',
74+
height: '14px',
75+
outline: 'none',
76+
borderRadius: '100%',
77+
background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
78+
border: 'solid 1px #888',
79+
}}
80+
/>
81+
),
82+
)}
83+
</div>
84+
<br />
85+
<br />
86+
<br />
87+
<pre
88+
style={{
89+
display: 'inline-block',
90+
textAlign: 'left',
91+
}}
92+
>
93+
<code>
94+
{JSON.stringify({
95+
values,
96+
})}
97+
</code>
98+
</pre>
99+
</div>
100+
)
101+
}
102+
103+
ReactDOM.render(
104+
<React.StrictMode>
105+
<App />
106+
</React.StrictMode>,
107+
document.getElementById('root'),
108+
)
109+
110+
```
111+
112+
If you skipped this example or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Router! Let's move on.

0 commit comments

Comments
 (0)