react-now-you-see-me

A React component for determining when an element is within a given threshold of the viewport, horizontally.

Usage no npm install needed!

<script type="module">
  import reactNowYouSeeMe from 'https://cdn.skypack.dev/react-now-you-see-me';
</script>

README

react-now-you-see-me

A React component for determining when an element is within a given threshold of the viewport, horizontally.

npm version CircleCI Known Vulnerabilities Coverage Status

Installation

npm i react-now-you-see-me

You'll also need React and ReactDOM peer dependencies: npm i react react-dom.

Usage

import * as React from 'react'
import InView from 'react-now-you-see-me'

const Foo = (props) => (
  <SomeCarouselComponent>
    {someSlides.map((_, i) =>
      <InView key={i} threshold={0} boundingLeft={100} boundingRight={100}>
        {(isInView) =>
          isInView
            ? <span>I am totally in view right now, awesome!</span>
            : <span>You can't see me :(</span>
        }
      </InView>
    )}
  </SomeCarouselComponent>
)

LICENSE

MIT