Nepotistic Pontifex Maximus

    @devseed-ui/shadow-scrollbar

    1.0.0 • Public • Published

    @devseed-ui/shadow-scrollbar

    The shadow scrollbar adds custom scrollbars to ensure that they're consistent in all browsers. It also includes shadows on the sides of the container to indicate there's more content to scroll through. These shadows gradually disappear when the user reaches the end of the content.

    It extends the functionality of react-custom-scrollbars and all its API methods are still available to be used.

    Import

      import ShadowScrollbar from '@devseed-ui/shadow-scrollbar';
    

    Example

    <DevseedUiThemeProvider>
      <ShadowScrollbar
        style={{ height: '200px', width: '400px', background: '#eee' }}
      >
        <p>
          The scrollbar element <code>ShadowScrollbar</code> always needs to
          have spatiality.
        </p>
        <p>
          This can be done through a property that gives height to the element
          (Ex: <code>height: 100%</code>, <code>flex: 1</code>, etc)
        </p>
        <br />
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
      </ShadowScrollbar>
    </DevseedUiThemeProvider>
    

    Variation

    By default the shadows are of a light variation, but a dark on is also available. It is also possible to set the variation to none and only take advantage of the custom scrollbars.

    API Documentation

    rows:
      - Prop name: "topShadowVariation"
        Type: "string"
        Description: "Variation of the www shadow. One of `light`, `dark`, `none`"
        Default value: "light"
      - Prop name: "bottomShadowVariation"
        Type: "string"
        Description: "Variation of the www shadow. One of `light`, `dark`, `none`"
        Default value: "light"
      - Prop name: "leftShadowVariation"
        Type: "string"
        Description: "Variation of the www shadow. One of `light`, `dark`, `none`"
        Default value: "light"
      - Prop name: "rightShadowVariation"
        Type: "string"
        Description: "Variation of the www shadow. One of `light`, `dark`, `none`"
        Default value: "light"
      - Prop name: "scrollbarsProps"
        Type: "object"
        Description: "Props for `react-custom-scrollbars`. See https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md"
        Default value: "{}"
    

    Install

    npm i @devseed-ui/shadow-scrollbar

    DownloadsWeekly Downloads

    18

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    81.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • hnhubner
    • danielfdsilva
    • vgeorge