From 9035f23b4f5e3dbc24781764a85389c9f26a7c41 Mon Sep 17 00:00:00 2001 From: Drew Powers Date: Wed, 8 Aug 2018 06:32:53 -0600 Subject: [PATCH] Improve README clarity --- README.md | 22 ++++++++++++---------- package.json | 2 +- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 2577eef..4a86a43 100644 --- a/README.md +++ b/README.md @@ -21,8 +21,10 @@ import ScrollAgent from 'react-scroll-agent'; nav={({ current, positions }) => ( Section 1 - window.scrollTo(0, positions[1]) className={current === 1 ? 'is-active' : ''}>Section 2 - Section 3 + Section 2 + window.scrollTo(0, positions[2])} className={current === 1 ? 'is-active' : ''}> + Section 3 + )} 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 index 0466e87..73792b2 100644 --- 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": {