react-smart-side-bar

React component which provides the sticky-like behavior to its child block with variable height.

Description

The component allows to create a block, which sticks to page borders during the page scrolling. This sticky block reacts to the changes in height of its child elements, e.g. accordeon open/close.

Installation

npm

npm install @aic/react-smart-side-bar

yarn

yarn add @aic/react-smart-side-bar

Usage

import SmartSideBar from '@aic/react-smart-side-bar'

function App () {
  return (
    <SmartSideBar>
      <div>Sidebar content</div>
    </SmartSideBar>
  )
}

Parameters

Props

Prop	Type	Default	Description
top	Number	0	Top offset for the sticky block
transitionDuration	Number	0	Animation duration for sticky block position change or reactive change of its top offset.
staticContent	Node	null	Static content which is located inside sidebar but above sticky block.
debug	Boolean	false	Turn on debug mode to watch the behavior and actual state of sticky block.
In case any of the parameters's value is not provided, its default value would be applied.

Example

import SmartSideBar from '@aic/react-smart-side-bar'

function App () {
  return (
    <SmartSideBar
      top={3.5}
      transitionDuration={0.3}
      staticContent={
        <div>
          <div>Static content above sidebar</div>
        </div>
      }
    >
      <div>Sidebar content</div>
    </SmartSideBar>
  )
}

Browsers Compatibility

Browser	Version
Mozilla Firefox	22+
Google Chrome	51+
Opera	38+
Internet Explorer	11+
Microsoft Edge	15+
Safari	11.1+