1.0.2 • Published 7 years ago

react-following-container v1.0.2

Weekly downloads
1
License
MIT
Repository
github
Last release
7 years ago

React Following Container

Build Status

Coverage Status

React Higher Order Component (HOC) for creating moving component that sticks and follows when the browser scrolled.

Use Cases

  • Creating side menu that follows the screen like Medium does
  • Creating social media buttons
  • Find more examples here

How It Works

  1. It wraps the component with a div element that has an absolute position and some javascript function to detect browser scrolling behavior.
  2. When we scroll the browser's window it calculates the new position based on current viewpoint.
  3. Its top position changes based on the calculated position.

Installation

npm install --save react-following-container

This assumes you are using npm as package manager.

Usage

import followingContainer from 'react-following-container';
import 'react-following-container/dist/libs/followingContainer.css';

const FollowingComponent = followingContainer(WrappedComponent, configurations);

API Reference

followingContainer(WrappedComponent, configurations) It need two parameters to take effect.

  • WrappedComponent is React component to be wrapped with the container. It can be class or function component. Visit this link form more informations about both of them. This paramater is mandatory.
  • configurations is custom configurations for the container. Please remember to pass this configurations as an object. Check out configurations section to see the list of available configurations. This parameter is optional.

Example Code

import React from 'react';
import followingContainer from 'react-following-container';
import 'react-following-container/dist/libs/followingContainer.css';

const Actions = (props) => (
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
);

const configs = {
    upperStopPoint: 200,
    viewportPaddingTop: 200,
    hideOnStart: true,
    hideOnTop: true
};
const FollowingActions = followingContainer(Actions, configs);

const App = (props) => (
    <div>
        <FollowingActions />
        <div className='content'>
            <p>Example content.</p>
        </div>
    </div>
);

export default App;

Configurations

You can pass configuration object for the component as second parameter. Here's available options:

PropertyDescriptionValue typeDefault
positionPosition of the container. There're only two options, left or rightstringleft
marginLeftContainer's left margin (in px). It only takes effect when position set to leftnumber0
marginRightContainer's right margin (in px). It only takes effect when position set to rightnumber0
upperStopPointMinimum height (in px) the component will start to follow the scrollnumber (i.e: 100)10
lowerStopPointHeight (in px) calculated from the bottom of document which the component will stop movingnumber (i.e: 100)10
viewPortPaddingTopTop padding (in px) of the component when it starts following the scrollnumber (i.e: 100)10
hideOnStartIf set to true then the component will be hidden when initiatedbooleanfalse
hideOnTopIf set to true then the component will be hidden when it reaches upperStopPoint again after following the scrollbooleanfalse

Credits

License

MIT