@n8tb1t/use-scroll-position - npm Package Compare versions

Comparing version 1.0.28 to 1.0.29

CHANGELOG.md

		@@ -0,1 +1,7 @@
		#### 1.0.29 (2019-06-24)

		##### Documentation Changes

		* Add more examples ([d90f30fd](https://github.com/n8tb1t/use-scroll-position/commit/d90f30fdfe0654489a665f14f571e11deca8239d))

		#### 1.0.28 (2019-06-23)
		@@ -2,0 +8,0 @@

package.json

		{
		"name": "@n8tb1t/use-scroll-position",
		"version": "1.0.28",
		"version": "1.0.29",
		"author": "n8tb1t <n8tb1t@gmail.com>",
		@@ -5,0 +5,0 @@ "license": "MIT",

README.md

		@@ -7,2 +7,8 @@ # `use-scroll-position`


		`use-scroll-position` is a React [hook](https://reactjs.org/docs/hooks-reference.html) that returns the browser viewport X and Y scroll position. It is highly optimized and using the special technics to avoid unnecessary rerenders!

		> It uses the default react hooks rendering lifecycle, which allows you to fully control its behavior and prevent unnecessary renders.


		## Install
		@@ -16,2 +22,22 @@ ```
		```jsx
		useScrollPosition(effect,deps)
		```

		\| Arguments \| Description \|
		\| --------- \| ----------- \|
		`effect` \| Effect callback.
		`deps` \| For effects to fire on selected dependencies change.

		The `useScrollPosition` returns `prevPos` and `currPos`.

		```jsx
		import { useScrollPosition } from '@n8tb1t/use-scroll-position'

		useScrollPosition(({ prevPos, currPos }) => {
		console.log(currPos.x)
		console.log(currPos.y)
		})
		```

		```jsx
		import React, { useState } from 'react'
		@@ -26,2 +52,8 @@ import { useScrollPosition } from '@n8tb1t/use-scroll-position'
		}, [hideOnScroll])
		```
		```

		## Why to use
		`use-scroll-position` returns the scroll position of the browser window, using a modern, stable and performant implementation.

		Most of the time scroll listeners do very expensive work, such as querying dom elements, reading height / width and so on.
		`use-scroll-position` solves this by using [`requestAnimationFrame`](https://stackoverflow.com/a/44779316) technic to avoid too many reflows (the browser to recalculate everything)

src/index.jsx

		@@ -1,2 +0,1 @@

		export { useScrollPosition } from './useScrollPosition'
		export { useScrollPosition } from './useScrollPosition'

New alerts