react-scrollable-box v0.2.1

react-scrollable-box

ScrollableBox is a component that allows to visually indicate whether it is possible to see more content by scrolling.

Usage

Think of a ScrollableBox as a group of 3 elements: the scrollable content itself and two "lips" or edges. Those lips can be used to mark scrollable content's beginning and end, and/or let users know if there's more content to be scrolled.

By default, ScrollableBox does not apply any CSS to neither content nor lips. You are free to use whatever CSS solution you want.

Props

Ref

ScrollableBox exposes some imperative methods via its ref attribute:

• scrollToBottom — scrolls the content to bottom.
• scrollToTop — scrolls the content to top. One of use cases for this could be displaying a list of messages inside ScrollableBox — you'd probably want to scroll to bottom once the user sends a new message.

Examples

Example with default css

import React from 'react';
import ScrollableBox, { useDefaultLipClassNames } from 'react-scrollable-box';
import 'react-scrollable-box/lib/default.css';

function Example() {
  const lipClassNames = useDefaultLipClassNames();

  // You can also pass "className" prop to ScrollableBox
  return (
    <ScrollableBox
      {...lipClassNames}
      style={{ maxHeight: '240px', overflow: 'auto' }}
    >
      {/* Some long text */}
    </ScrollableBox>
  );
}

Example with emotion (v9)

import React from 'react';
import { css, cx } from 'emotion';
import ScrollableBox from 'react-scrollable-box';

const overflowLipCss = css`
  height: 1px;
  border: none;
  position: relative;
  overflow: visible;
  flex-shrink: 0;

  &::after {
    content: ' ';
    position: absolute;
    height: 4px;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in;
  }
`;

const overflowLipTopCss = css`
  ${overflowLipCss};
  &::after {
    border-bottom: 1px solid #e6e6e6;
    box-shadow: 0 4px 4px 0 rgba(33, 34, 38, 0.05);
    bottom: 0;
  }
`;

const overflowLipBottomCss = css`
  ${overflowLipCss};
  &::after {
    border-top: 1px solid #e6e6e6;
    box-shadow: 0 -4px 4px 0 rgba(33, 34, 38, 0.05);
    top: 0;
  }
`;

const overflowShadowVisibleCss = css`
  &::after {
    opacity: 1;
  }
`;

function Example() {
  return (
    <ScrollableBox
      className={css({ maxHeight: '240px', overflow: 'auto' })}
      topLipClassName={(hasOverflow) =>
        cx(overflowLipTopCss, hasOverflow && overflowShadowVisibleCss)
      }
      bottomLipClassName={(hasOverflow) =>
        cx(overflowLipBottomCss, hasOverflow && overflowShadowVisibleCss)
      }
    >
      {/* Some long text */}
    </ScrollableBox>
  );
}