jscottsmith / react-observed Goto Github PK

Hi @jscottsmith,

Thank you for putting out this library - has been super helpful so far.

The one place where I found myself confused originally is understanding the difference between intersectionRatio and options.threshold. Once I looked at the code, the intent became a little clearer but I noticed that the options.threshold is set 1 by default - that means that if someone only supplies the intersectionRatio, then it is never really used since it will always be less than or equal to the default threshold.

Should the default options.threshold be either 0 or equal to the passed in intersectionRatio?

Does using this library on a component require that the component maintains it's own state? I have a stateless component that I would like to observe, but stateless components can not use the ref property. Is there any way around this besides converting my class syntax?

@todo for v1.0.0 release:

• Publish a demo and/or Storybook
• Add test coverage by codecov.io
• Support React 16
• Test and document browser support
• Proofread and clarify prop behavior in README (See #2, #3)
• Add a story to demo once prop
• Merge incoming props.options with defaults
• Change defaults: options.threshold to 0 and intersectionRatio to 0 (See #2)
• Default options.threshold to intersectionRatio when none is provided
• add handlers for isInView state changes:
  • onEnter
  • onExit
  • onChange
• add handler for onIntersect that's called with entry data when each threshold is met

Amazing plugin and thanks for open-sourcing this! maybe im doing something wrong but im folowing the instructions and getting an error

Uncaught Error: Must provide a ref to the DOM element to be observed.
    at Observed.observe (Observed.js:122)
    at Observed.componentDidMount (Observed.js:83)
    at commitLifeCycles (react-dom.development.js:8770)
    at commitAllLifeCycles (react-dom.development.js:9946)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at commitRoot (react-dom.development.js:10050)
    at performWorkOnRoot (react-dom.development.js:11017)
    at performWork (react-dom.development.js:10967)

this is the main container

import React from 'react';
import Observed from 'react-observed';
import 'intersection-observer';

// containers
import Introduction from './views/Introduction';
import FeaturedProjects from '../FeaturedProjects';
import MyInformation from '../MyInformation';

const Homepage = () => (
  <main>
    <Introduction />
    <Observed
      initialViewState
      onChange={isInView => {}}
      options={{
        root: null,
        rootMargin: '0px 0px -160px 0px',
        threshold: [0, 0.25, 0.5, 0.75, 1]
      }}
    >
      {({ isInView, mapRef }) => (

          <FeaturedProjects isInView={isInView} mapRef={mapRef} />
   
      )}
    </Observed>
  </main>
);

export default Homepage;

and this is the component wrapped in it, its a stateless pure function component

const FeaturedProjects = ({ isInView, mapRef }) => (
  <section ref={mapRef} className="featured-projects">
    {isInView ? (
        <ProjectPreview
          number="01"
          project={projectTest}
          link="/"
          mainImage={mainImage}
        />
    ) : (
      <span>not in view.</span>
    )}
  </section>
);
export default FeaturedProjects;

Also, do I need the ternary operator? can I leave it blank just to render it if in view? thanks again for the help in advance

Prop validation is throwing on instanceOf(Element).

See #4