Scroll

Displays children in a horizontally spaced and scrollable grid.

It’s integral to most device agnostic layouts.

It’s best used as a block that occupies the entire viewport width:

More items will be visible in a narrow viewport.
Users can interact with a larger area to scroll.
Cropping items to a hole in the page doesn’t make skeuomorphic sense; it’s intuitive for items to scroll off the viewport.

Styles

Import the styles within a Next.js custom app in pages/_app.js.

import 'device-agnostic-ui/public/components/Scroll.css';

Props

`children`

Type	JSX children (required)

CSS Grid items to be horizontally spaced and vertically top aligned.

`...props`

Type	…* (optional)

Additional props for the container; a <div> element.

Examples

Deep import.

import Scroll from 'device-agnostic-ui/public/components/Scroll.js';

Deep require.

const Scroll = require('device-agnostic-ui/public/components/Scroll');

Index import. Convenient, but technically inferior to a deep import.

import { Scroll } from 'device-agnostic-ui';

Index require. Convenient, but technically inferior to a deep require.

const { Scroll } = require('device-agnostic-ui');

Several articles. The maxWidth style is only to demo demo scrolling; limiting the width isn’t recommended.

import { Heading, Scroll } from 'device-agnostic-ui';

const result = (
  <Scroll style={{ maxWidth: '15rem' }}>
    <article>
      <Heading>First</Heading>
    </article>
    <article>
      <Heading>Second</Heading>
    </article>
    <article>
      <Heading>Third</Heading>
    </article>
    <article>
      <Heading>Fourth</Heading>
    </article>
  </Scroll>
);