Skip to content

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

License

Notifications You must be signed in to change notification settings

jane/react-now-you-see-me

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published