react-always-visible

Make sure that your container is always in viewpoint when displayed.

Install

npm install --save react-always-visible

Usage

import React, { Component } from 'react';

import ReactAlwaysVisible from 'react-always-visible';
import 'react-always-visible/dist/index.css';

class UserComponent extends Component {
  render() {
    return (
      <div>{this.props.text}</div
    );
  }
};

class Example extends Component {
  render() {
    return (
      <div>
        <ReactAlwaysVisible>
          <UserComponent text="Should be bottom-top" />
        </ReactAlwaysVisible>
      </div>
    );
  }
};

Usage Examples

The real advantage of using this plugin is within tables and lists where it is necessary to scroll down due to the number of elements. Using this plugin container activated by table/list item click is always fully displayed in viwepoint.

License

MIT © irfankr