Skip to content

Commit

Permalink
IMPROVE README
Browse files Browse the repository at this point in the history
  • Loading branch information
TomasSestak committed May 21, 2021
1 parent 8aaa7cc commit d549b87
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 13 deletions.
46 changes: 34 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,49 @@ yarn add react-spring-scroll-to-hook

## Usage

useScrollTo hook accepts 1 argument a that is react-spring config: https://react-spring.io/common/configs
scrollTo function returned from useScrollTo hook accepts 2 arguments:

1: Element | string | number (number of pixels from top of the window)
2: Number (offset in pixels from element you want to scroll to)

I don't know how three shaking works but I would recommend using <b>@react-spring/web (used in this hook)</b> instead of react-spring

## Examples

```tsx

import {config} from '@react-spring/web'
import useScrollTo from 'react-spring-scroll-to-hook'

//Scroll to element
const BasicExampleWthConfig = () => {
const {scrollTo} = useScrollTo(config.molasses)
return (
<button type="button" onClick={() => scrollTo(document.querySelector('#id'))}>
Scroll to Element
</button>
)
const {scrollTo} = useScrollTo(config.molasses)
return (
<button type="button" onClick={() => scrollTo(document.querySelector('#id'))}>
Scroll to Element with predefined config from react-spring
</button>
)
}

//Scroll to top
const ScrollToTop = () => {
const {scrollTo} = useScrollTo()
return (
<button type="button" onClick={scrollTo}>
Scroll to the top of the page with default config
</button>
)
const {scrollTo} = useScrollTo({ mass: 1, tension: 180, friction: 12 })
return (
<button type="button" onClick={scrollTo}>
Scroll to the top of the page with your config
</button>
)
}

//Scroll to top with offset and first argument as string only (document.querySelector is used in the hook)
const ScrollToTopWithOffset = () => {
const {scrollTo} = useScrollTo()
return (
<button type="button" onClick={() => scrollTo('#id', 300)}>
Scroll to the top of the page with default config and offset from element
</button>
)
}

```
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-spring-scroll-to-hook",
"version": "1.0.2",
"version": "1.0.3",
"description": "Simple custom hook for ScrollTo functionality using react-spring v9+.",
"author": "TomasSestak",
"license": "MIT",
Expand Down

0 comments on commit d549b87

Please sign in to comment.