#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+ |