Remove style and className, and monitor children instead

example/main.js

@@ -22,9 +22,9 @@ var Example = React.createClass({
  <div>
  <p className='msg'>{this.state.msg}</p>
  <div className='before'></div>
- <div className='sensor'>
- <VisibilitySensor containment={this.props.containment} onChange={this.onChange} />
- </div>
+ <VisibilitySensor containment={this.props.containment} onChange={this.onChange}>
+ <div className='sensor' />
+ </VisibilitySensor>
  <div className='after'></div>
  </div>
  );

tests/visibility-sensor-spec.jsx

@@ -6,29 +6,28 @@ var React = require('react/addons');
 var assert = require('assert');
 
 describe('VisibilitySensor', function () {
- var elem;
+ var node;
 
  beforeEach(function () {
- elem = document.createElement('div');
- document.body.appendChild(elem);
+ node = document.createElement('div');
+ document.body.appendChild(node);
  });
 
  afterEach(function () {
- React.unmountComponentAtNode(elem);
- document.body.removeChild(elem);
+ React.unmountComponentAtNode(node);
+ document.body.removeChild(node);
  });
 
  var VisibilitySensor = React.createFactory(require('../visibility-sensor.js'));
 
- it('should notify of changes to visibility', function (done) {
- var component;
+ it('should notify of changes to visibility when parent moves', function (done) {
  var firstTime = true;
  var onChange = function (isVisible) {
  // by default we expect the sensor to be visible
  if (firstTime) {
  firstTime = false;
  assert.equal(isVisible, true, 'Component starts out visible');
- elem.setAttribute('style', 'position:absolute; width:100px; left:-101px');
+ node.setAttribute('style', 'position:absolute; width:100px; left:-101px');
  }
  // after moving the sensor it should be not visible anymore
  else {
@@ -37,28 +36,60 @@ describe('VisibilitySensor', function () {
  }
  };
 
- component = (
+ var element = (
  <VisibilitySensor delay={10} onChange={onChange} />
  );
 
- React.render(component, elem);
+ React.render(element, node);
  });
 
+ it('should notify of changes to visibility when child moves', function (done) {
+ var firstTime = true;
+ var style = {};
+ var onChange = function (isVisible) {
+ // by default we expect the sensor to be visible
+ if (firstTime) {
+ firstTime = false;
+ assert.equal(isVisible, true, 'Component starts out visible');
+ style = {
+ position: 'absolute',
+ width: 100,
+ left: -101
+ };
+ React.render(getElement(style), node);
+ }
+ // after moving the sensor it should be not visible anymore
+ else {
+ assert.equal(isVisible, false, 'Component has moved out of the visible viewport');
+ done();
+ }
+ };
+
+ function getElement(style) {
+ return (
+ <VisibilitySensor delay={10} onChange={onChange}>
+ <div style={style} />
+ </VisibilitySensor>
+ );
+ }
+
+ React.render(getElement(), node);
+ });
+
+
  it('should notify of changes to visibility', function (done) {
- var component;
  var onChange = function (isVisible) {
  assert.equal(isVisible, true, 'Component starts out visible');
  done();
  };
- component = (
+ var element = (
  <VisibilitySensor delay={1} onChange={onChange} />
  );
 
- React.render(component, elem);
+ React.render(element, node);
  });
 
  it('should not notify when deactivated', function (done) {
- var component;
  var wasCallbackCalled = false;
  var onChange = function (isVisible) {
  wasCallbackCalled = true;
@@ -69,10 +100,10 @@ describe('VisibilitySensor', function () {
  done();
  }, 20);
 
- component = (
+ var element = (
  <VisibilitySensor active={false} delay={1} onChange={onChange} />
  );
 
- React.render(component, elem);
+ React.render(element, node);
  });
 });

visibility-sensor.js

@@ -10,15 +10,15 @@ module.exports = React.createClass({
  active: React.PropTypes.bool,
  delay: React.PropTypes.number,
  containment: React.PropTypes.instanceOf(Element),
- className: React.PropTypes.string,
- style: React.PropTypes.object
+ children: React.PropTypes.element
  },
 
  getDefaultProps: function () {
  return {
  active: true,
  delay: 1000,
- containment: null
+ containment: null,
+ children: React.createElement('span')
  };
  },
 
@@ -104,9 +104,6 @@ module.exports = React.createClass({
  },
 
  render: function () {
- return React.createElement('div', {
- className: this.props.className,
- style: this.props.style
- }, [this.props.children]);
+ return React.Children.only(this.props.children);
  }
 });