@react-spring/parallax - npm Package Compare versions

Comparing version 9.2.4 to 9.2.5-beta.0

package.json

		{
		"name": "@react-spring/parallax",
		"version": "9.2.4",
		"version": "9.2.5-beta.0",
		"main": "dist/react-spring-parallax.cjs.js",
		@@ -29,5 +29,8 @@ "module": "dist/react-spring-parallax.esm.js",
		],
		"scripts": {
		"dev": "cd ./test && yarn dev"
		},
		"dependencies": {
		"@react-spring/shared": "~9.2.0",
		"@react-spring/web": "~9.2.0"
		"@react-spring/shared": "~9.2.5-beta.0",
		"@react-spring/web": "~9.2.5-beta.0"
		},
		@@ -34,0 +37,0 @@ "peerDependencies": {

README.md

		# @react-spring/parallax

		This package exports the `Parallax` and `ParallaxLayer` components. Both are wrapped with `React.memo`.
		```bash
		yarn add @react-spring/parallax
		```

		`Parallax` creates a scroll container. Throw in any amount of `ParallaxLayer`s and it will take care of
		moving them in accordance to their offsets and speeds.
		NOTE: Currently, only `@react-spring/web` is supported.

		Note: Currently, only `@react-spring/web` is supported.
		`Parallax` creates a scrollable container. `ParallaxLayer`s contain your content and will be moved according to their offsets and speeds.

		```tsx
		```jsx
		import { Parallax, ParallaxLayer } from '@react-spring/parallax'

		const Example = () => {
		const ref = useRef<Parallax>()
		const ref = useRef()
		return (
		<Parallax ref={ref} pages={3} scrolling={false} horizontal>
		<ParallaxLayer offset={0} speed={0.5}>
		<span
		onClick={() => {
		ref.current.scrollTo(1)
		}}>
		Layers can contain anything
		</span>
		<Parallax pages={3} ref={ref}>
		<ParallaxLayer offset={0} speed={2.5}>
		<p>Layers can contain anything</p>
		</ParallaxLayer>

		<ParallaxLayer offset={1} speed={-2} factor={1.5} horizontal />

		<ParallaxLayer sticky={{ start: 1, end: 2 }} />

		<ParallaxLayer offset={2} speed={1}>
		<button onClick={() => ref.current.scrollTo(0)}>Scroll to top</button>
		</ParallaxLayer>
		</Parallax>
		@@ -30,48 +34,42 @@ )

		## `Parallax` props
		## Parallax

		- `pages: number`
		\| Property \| Type \| Description \|
		\| ----------- \| ------------- \| ------------------------------------------------------------------------------------------------------- \|
		\| pages \| number \| Total space of the container. Each page takes up 100% of the viewport. \|
		\| config? \| SpringConfig \| The spring behavior. Defaults to `config.slow` (see [configs](https://react-spring.io/common/configs)). \|
		\| enabled? \| boolean \| Whether or not the content can be scrolled. Defaults to `true`. \|
		\| horizontal? \| boolean \| Whether or not the container scrolls horizontally. Defaults to `false`. \|
		\| innerStyle? \| CSSProperties \| CSS object to style the inner `Parallax` wrapper (not the scrollable container) \|

		Determines the total space of the inner content where each page takes 100% of the visible container.
		### `scrollTo`

		- `config?: SpringConfig`
		`Parallax` also has a `scrollTo` function for click-to-scroll. It takes one paramater: the number of the page to scroll to
		(Pages are zero-indexed so `scrollTo(0)` will scroll to the first page, etc).

		The spring behavior.
		### Usage Notes

		Defaults to `config.slow`.
		- `Parallax` is a scrollable container so all scroll events are fired from the container itself -- listening for scroll on `window` won't work.
		- `scrollTo` is a method on `Parallax` -- you access it with a `ref` and then `ref.current.scrollTo(pageNumber)`.

		- `scrolling?: boolean`
		## ParallaxLayer

		Allow content to be scrolled or not.
		\| Property \| Type \| Description \|
		\| ----------- \| ------------ \| -------------------------------------------------------------------------------------------------------------------------------------------------- \|
		\| factor? \| number \| Size of the layer relative to page size (eg: `1` => 100%, `1.5` => 150%, etc). Defaults to `1`. \|
		\| offset? \| number \| The offset of the layer when it's corresponding page is fully in view (eg: `0` => top of 1st page, `1` => top of 2nd page, etc ). Defaults to `0`. \|
		\| speed? \| number \| Rate at which the layer moves in relation to scroll. Can be positive or negative. Defaults to `0`. \|
		\| horizontal? \| boolean \| Whether or not the layer moves horizontally. Defaults to the `horizontal` value of `Parallax` (whose default is `false`). \|
		\| sticky? \| StickyConfig \| If set, the layer will be 'sticky' between the two offsets. All other props are ignored. Default: `{start?: number = 0, end?: number = start + 1}` \|

		Defaults to `true`.
		### Usage Notes

		- `horizontal?: boolean
		- The `offset` prop is where the layer will end up, not where it begins. For example, if a layer has an offset of `1.5`, it will be halfway down the second page (zero-indexed) when the second page completely fills the viewport.
		- The `speed` prop will affect the initial starting position of a layer, but not it's final `offset` position.
		- Any layer with `sticky` set will have a `z-index` higher than regular layers. This can be changed manually.

		When `true`, content scrolls from left to right.
		## Demos

		Defaults to `false`.

		## `ParallaxLayer` props

		- `factor?: number`

		The page size (eg: 1 => 100%, 1.5 => 150%, etc)

		Defaults to `1`.

		- `offset?: number`

		The page offset (eg: 0 => top of 1st page, 1 => top of 2nd page, etc)

		Defaults to `0`.

		- `speed?: number`

		Shift the layer in accordance to its offset. Values can be positive or negative.

		Defaults to `0`.

		## Credits

		Paul Henschel
		- [Parallax - vertical](https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/parallax-vert)
		- [Parallax - horizontal](https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/parallax)
		- [Parallax - sticky](https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/parallax-sticky)

@react-spring/parallax - npm Package Compare versions

New alerts

Improved metrics

Worsened metrics

Dependency changes