react-within-viewport

1.2.4 • Public • Published

react-within-viewport

npm version dependency status build status

Debounced React high order component to flag when it's container is inside the viewport.

Usage

Let's build an example react component:

const Header = ({ style }) => (<h1 style={style}>Header</h1>)

And decorate:

import WithinViewport from 'react-within-viewport'
 
const Decorated = WithinViewport()(Header)

Now when you use <Decorated /> it will pass the boolean property inViewport to Header.

The passed prop is transformed by a function. You can use it to, for example, changing the prop name:

const Decorated = WithinViewport(
  { transform: ({ inViewport }) => ({ insideViewport: inViewport }) }
)(Header)

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.

You can also change the wrapper div style to meet your needs like:

const Decorated = WithinViewport(
  { containerStyle: { display: 'inline-block' } }
)(Header)

Contributing

First of all, thank you for wanting to help!

  1. Fork it.
  2. Create a feature branch - git checkout -b more_magic
  3. Add tests and make your changes
  4. Check if tests are ok - npm test
  5. Commit changes - git commit -am "Added more magic"
  6. Push to Github - git push origin more_magic
  7. Send a pull request! ❤️ 💖 ❤️

Package Sidebar

Install

npm i react-within-viewport

Weekly Downloads

2

Version

1.2.4

License

ISC

Last publish

Collaborators

  • ggarnier
  • sergioazevedo
  • daniel.acfilho
  • aitherios