@aic/react-smart-side-bar

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

Usage no npm install needed!

<script type="module">
  import aicReactSmartSideBar from 'https://cdn.skypack.dev/@aic/react-smart-side-bar';
</script>

README

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+