React Sticky Hierarchical

A Sticky Hierarchical component for React.js

It is clone of react-sticky-stack with changes to became hierarchical.

Demo

https://lucas-issa.github.io/react-sticky-hierarchical/

Installation

$ yarn add react-sticky-hierarchical

or

$ npm install react-sticky-hierarchical --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {StickyHierarchicalContext, StickyHierarchicalItem} from 'react-sticky-hierarchical';
 
const App = React.createClass({
  render() {
    return (
      <StickyHierarchicalContext>
        <p>
          Lorem Ipsum
        </p>
        <StickyHierarchicalItem hierarchicalLevel={0}>
          <h1>
            Live
          </h1>
        </StickyHierarchicalItem>
        <p>
          Lorem Ipsum
        </p>
        <StickyHierarchicalItem hierarchicalLevel={1}>
          <h2>
            Your
          </h2>
        </StickyHierarchicalItem>
        <p>
          Lorem Ipsum
        </p>
        <StickyHierarchicalItem hierarchicalLevel={2}>
          <h3>
            City
          </h3>
        </StickyHierarchicalItem>
        <p>
          Lorem Ipsum
        </p>
      </StickyHierarchicalContext>
    );
  },
});
 
ReactDOM.render(<App />, document.getElementById('app'));

StickyHierarchicalContext component also has the optional stickyClassName property.

Test

$ yarn run test

or

$ npm test