Improve README clarity

manifoldco · Aug 8, 2018 · 9035f23 · 9035f23
1 parent 8c71d22
commit 9035f23
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -21,8 +21,10 @@ import ScrollAgent from 'react-scroll-agent';
   nav={({ current, positions }) => (
     <menu>
       <a href="#section-1" className={current === 0 ? 'is-active' : ''}>Section 1</a>
-      <a onClick={() => window.scrollTo(0, positions[1]) className={current === 1 ? 'is-active' : ''}>Section 2</a>
-      <a href="#section-3" className={current === 2 ? 'is-active' : ''}>Section 3</a>
+      <a href="#section-2" className={current === 1 ? 'is-active' : ''}>Section 2</a>
+      <a onClick={() => window.scrollTo(0, positions[2])} className={current === 1 ? 'is-active' : ''}>
+        Section 3
+      </a>
     </menu>
   )}
   selector="section[data-scrollspy]"
@@ -45,8 +47,8 @@ import ScrollAgent from 'react-scroll-agent';
 
 | Name        | Type       | Required | Default | Description                                                                                                                                                                                     |
 | :---------- | :--------- | :------: | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `selector`  | `String`   | ✅        |         | Any CSS selector to specify which elements in `React.Children` to attach the scrollspy to.                                                                                                      |
-| `children`  | React Node |          |         | Standard passthrough for `React.Children`. This is where it watches for scroll events.                                                                                                          |
+| `selector`  | `String`   | ✅        |         | Any CSS selector to specify which elements in `children` to attach the scrollspy to.                                                                                                            |
+| `children`  | React Node |          |         | Standard child passthrough. This is where it watches for scroll events.                                                                                                                         |
 | `detectEnd` | `Boolean`  |          | `true`  | If `true`, the last index will be highlighted when scrolled to the bottom. If `false`, then when scrolled to the bottom, `current` will return whichever container is currently at `threshold`. |
 | `nav`       | React Node |          |         | Render prop that returns `current` index in view and all `positions` of items.                                                                                                                  |
 | `threshold` | `String`   |          | `"top"` | Trigger point at which `current` watches. Accepts `"top"`, `"center"`, or `"bottom"` (if a specific threshold is needed, simply add `padding` to the top or bottom of a container).             |
@@ -75,14 +77,14 @@ The `nav` render prop returns the following items:
   )}
 ```
 
-| Name        | Type       | Description                                                                                   |
-| :---------- | :--------- | :-------------------------------------------------------------------------------------------- |
-| `current`   | `Number`   | The index of the current item in view, in DOM order                                           |
-| `positions` | `[Number]` | An array of all absolute Y values on the page. Useful for animating scroll to a certain item. |
+| Name        | Type       | Description                                                                                                               |
+| :---------- | :--------- | :------------------------------------------------------------------------------------------------------------------------ |
+| `current`   | `Number`   | The index of the current item in view, in visual descending order on the page (may not necessarily be DOM order).         |
+| `positions` | `[Number]` | An array of all absolute Y values on the page, ordered from top to bottom. Useful for animating scroll to a certain item. |
 
 ### Notes
 
 - If the first item isn’t in view, then `current` will return `-1`. This is expected, and allows more flexibility in styling. If you always want the first item to be highlighted, then check that `current === 0 || current === -1`.
-- This component achieves performance by letting you handle updates, animations, and scroll transitions yourself. If you need smooth scrolling from your nav, you can easily add another library to handle that. And react-scroll-agent will keep up!
+- This component achieves performance by letting you handle all animations. If you need smooth scrolling from your nav, you can easily add another library to handle that using `positions`.
 - `requestAnimationFrame` won’t fire more than 60FPS, so it’s a perfect native debouncing function for managing scroll events and reflows.
-- This component won’t update `current` unless it actually changes, preventing unnecessary re-renders in React.
+- This component won’t update `current` or `positions` unless it actually changes, preventing unnecessary re-renders in React.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://dangodev/react-scroll-agent.git"
+    "url": "git+https://github.com/dangodev/react-scroll-agent.git"
   },
   "homepage": "https://github.com/dangodev/react-scroll-agent",
   "bugs": {