Show First Row

A responsive component that displays a grid of items with a "show more/less" functionality using CSS container queries.

Installation

npm install @sealcode/show-first-row
npx sealgen register-external-controllers @sealcode/show-first-row src/controllers
npx sealgen register-external-styles @sealcode/show-first-row src/styles

Usage

Basic Usage

import { showFirstRow } from '@sealcode/show-first-row';

const items = [
  <div>Item 1</div>,
  <div>Item 2</div>,
  <div>Item 3</div>,
  // ... more items
];

const result = await showFirstRow({
  items,
  min_column_width_px: 250,
  column_gap_px: 10,
  row_gap_px: 10,
});

Advanced Usage

import { showFirstRow } from '@sealcode/show-first-row';

const result = await showFirstRow({
  items: myItems,
  min_column_width_px: 300,
  column_gap_px: 20,
  row_gap_px: 15,
  make_show_more_button: () => (
    <span class="custom-button">Load More Items</span>
  ),
  make_show_less_button: () => (
    <span class="custom-button">Show Less</span>
  ),
  add_button_to_content: (content, showMore, showLess) => (
    <div class="container">
      {content}
      <div class="button-container">
        {showMore}
        {showLess}
      </div>
    </div>
  ),
  classes: ['my-custom-class'],
  how_many_rows: (columns) => columns <= 2 ? 2 : 1,
});

Features

• Responsive Grid: Automatically adjusts number of columns based on container width
• CSS Container Queries: Uses modern CSS container queries for responsive behavior
• Customizable Buttons: Fully customizable show more/less buttons
• Flexible Layout: Customizable button positioning and styling
• Row Control: Configurable number of rows to display based on column count
• Smooth Transitions: CSS transitions for smooth show/hide animations

Configuration

The component supports the following configuration options:

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | items | FlatTemplatable[] | required | Array of JSX elements to display in the grid | | min_column_width_px | number | 250 | Minimum width of each column in pixels | | column_gap_px | number | 10 | Gap between columns in pixels | | row_gap_px | number | column_gap_px | Gap between rows in pixels | | make_show_more_button | () => JSX.Element | Default button | Function that returns the "show more" button content | | make_show_less_button | () => JSX.Element | Default button | Function that returns the "show less" button content | | add_button_to_content | (content, showMore, showLess) => JSX.Element | Default layout | Function that determines how buttons are positioned relative to content | | classes | string[] | [] | Additional CSS classes to apply to the container | | how_many_rows | (columns: number) => number | () => 1 | Function that determines how many rows to show based on column count |

CSS Classes

The component generates the following CSS classes:

• .show-first-row - Main container
• .show-first-row__items - Grid container for items
• .show-first-row__button - Button container
• .show-first-row__show-more-button - Show more button
• .show-first-row__show-less-button - Show less button
• .show-first-row__default-button - Default button styling

Dependencies

This package requires:

• tempstream - For JSX templating and rendering

Development

npm install
npm run build
npm test

License

ISC