@happyfresh/layout

Layout

Layout is used for managing UI layouts. They are used in item list, scrolling elements and global viewport layout.

Installation

yarn add @happyfresh/layout

Usage

import { css } from 'emotion';
import { HorizontalList } from '@happyfresh/layout';

const SampleCard = (props) => (
  <div
    className={css`
      width: 120px;
      height: 120px;
      border-radius: 4px;
      background: hotpink;
    `}
    {...props}
  />
);

export const StoreList = () => (
  <HorizontalList>
    {Array(16)
      .fill('')
      .map(() => (
        <>
          <SampleCard style={{ marginBottom: '8px' }} />
          <SampleCard />
        </>
      ))}
  </HorizontalList>
);