react-within-viewport - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

package.json

		{
		"name": "react-within-viewport",
		"version": "1.1.2",
		"version": "1.2.0",
		"description": "Debounced React high order component to flag when it's container is inside the viewport.",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -27,7 +27,10 @@ # react-within-viewport
		const Decorated = WithinViewport(
		{ transform: (inViewport) => ({ insideViewport: inViewport }) }
		{ transform: ({ inViewport }) => ({ insideViewport: inViewport }) }
		)(Header)
		```

		The property passed to the `Header` would change to `insideViewport`
		The property passed to the `Header` would change to `insideViewport`.
		The transformation function also receives: `containerWidth`, `containerHeight`,
		`containerTopOffset`, `containerLeftOffset`, `windowWidth`, `windowHeight` and `ready`.
		Ready is true when all positioning data are loaded.

		@@ -34,0 +37,0 @@ You can also change the wrapper div style to meet your needs like:

src/__tests__/within-viewport-test.js

		@@ -31,3 +31,5 @@ jest.unmock('../within-viewport')
		describe('when composing with a custom transform function', () => {
		const Decorated = WithinViewport({ transform: (v) => ({ insideViewport: v }) })(Header)
		const Decorated = WithinViewport({
		transform: ({ inViewport }) => ({ insideViewport: inViewport }),
		})(Header)

		@@ -34,0 +36,0 @@ beforeEach(() => {

src/within-viewport.js

		@@ -7,3 +7,3 @@ import React, { Component } from 'react'
		const withinViewport = ({
		transform = ((inViewport) => ({ inViewport })),
		transform = (({ inViewport }) => ({ inViewport })),
		containerStyle = ({
		@@ -69,3 +69,6 @@ width: '100%',
		!shallowEqual(this.props, nextProps) \|\|
		!shallowEqual(this.inViewport(this.state), this.inViewport(nextState))
		!shallowEqual(
		transform({ inViewport: this.inViewport(this.state), ...this.state }),
		transform({ inViewport: this.inViewport(nextState), ...nextState })
		)
		)
		@@ -155,3 +158,3 @@ }
		<BaseComponent
		{...transform(this.inViewport())}
		{...transform({ inViewport: this.inViewport(), ...this.state })}
		{...this.props}
		@@ -158,0 +161,0 @@ />

New alerts