Get-Set FlexoGrid

A masonry-style grid plugin with sort, filter and responsive support.
One codebase — builds both a vanilla JS bundle and a React component.

Build

npm install
npm run build

| Command | Output | Use for | |-------------------|---------------------------------|------------------| | npm run build | both outputs below | everything | | npm run build:js| dist-js/bundle.js | vanilla JS / CDN | | npm run build:react | dist/components/GSFlexoGrid.js | React / npm |

Vanilla JS

Include the bundle and call new GSFlexoGrid(element, params).

<script src="dist-js/bundle.js"></script>
<script>
  new GSFlexoGrid(document.querySelector('.grid'), {
    gap: '10px',
    count: 4,
    resetSortHandler: '.btn-reset-sort',
    resetFilterHandler: '.btn-reset-filter',
    sortByOptions: [
      { handler: document.querySelector('.btn-sort-date'), prop: 'date', type: 'string' },
      { handler: document.querySelector('.btn-sort-price'), prop: 'price', type: 'number' },
    ],
    filterByOptions: [
      { handler: document.querySelector('.btn-filter-new'), prop: 'category', value: 'new' },
    ],
    responsive: [
      { windowSize: 991, params: { count: 2 } },
      { windowSize: 767, params: { count: 1 } },
    ],
    afterInit: () => console.log('ready'),
  });
</script>

jQuery and HTMLElement.prototype shortcuts are also available after the bundle loads:

// jQuery
$('.grid').GSFlexoGrid({ count: 3 });

// Prototype
document.querySelector('.grid').GSFlexoGrid({ count: 3 });

Instance API (vanilla)

const instance = window.GSFlexoGridConfigue.instance('my-reference');
instance.destroy();
instance.refresh();

React

import GSFlexoGrid from '@get-set/gs-flexogrid';

const sortBtnRef   = useRef(null);
const filterBtnRef = useRef(null);
const resetRef     = useRef(null);

<button ref={sortBtnRef}>Sort by price</button>
<button ref={filterBtnRef}>Show new</button>
<button ref={resetRef}>Reset</button>

<GSFlexoGrid
  count={4}
  gap="10px"
  resetFilterHandler={resetRef}
  sortByOptions={[
    { handler: sortBtnRef, prop: 'price', type: 'number' },
  ]}
  filterByOptions={[
    { handler: filterBtnRef, prop: 'category', value: 'new' },
  ]}
  responsive={[
    { windowSize: 991, params: { count: 2 } },
    { windowSize: 767, params: { count: 1 } },
  ]}
>
  <div data-price="120" data-category="new"><img src="..." /></div>
  <div data-price="80"  data-category="sale"><img src="..." /></div>
</GSFlexoGrid>

Parameters

| Param | Type | Default | Description | |----------------------|-------------------------------|---------|--------------------------------------------------| | reference | string | '' | Unique key. Auto-generated if omitted. | | count | number | 3 | Number of columns. | | gap | string | '' | CSS gap value, e.g. '10px' or '10px 20px'. | | className | string | '' | Extra CSS class on the grid element. | | gsx | object | — | Inline CSS-in-JS styles (React only). | | resetSortHandler | string \| HTMLElement \| Ref| '' | Selector, element or ref to reset sort. | | resetFilterHandler | string \| HTMLElement \| Ref| '' | Selector, element or ref to reset filter. | | sortByOptions | SortByOption[] | [] | Sort button definitions. | | filterByOptions | FilterByOption[] | [] | Filter button definitions. | | responsive | ResponsiveOption[] | [] | Breakpoint overrides (sorted automatically). | | beforeInit | () => void | — | Callback fired before each position calculation. | | afterInit | () => void | — | Callback fired after init. | | afterPositionAnimating | () => void | — | Callback fired after the .4s transition ends. |

SortByOption

| Prop | Type | Description | |-----------|-------------------------------|----------------------------------------| | handler | string \| HTMLElement \| Ref| Button to attach onclick to. | | prop | string | data-* attribute name on each item. | | type | 'string' \| 'number' | Determines sort algorithm. |

FilterByOption

| Prop | Type | Description | |-----------|-------------------------------|--------------------------------------------------| | handler | string \| HTMLElement \| Ref| Button to attach onclick to. | | prop | string | data-* attribute name on each item. | | value | any | Value to match against data-[prop]. | | type | 'string' \| 'number' | Type of the prop (used for future sort support). |

Handler types

resetSortHandler, resetFilterHandler, and each handler in sortByOptions / filterByOptions all accept any of these three forms interchangeably:

// CSS selector string — vanilla JS
resetSortHandler: '.btn-reset-sort'

// HTMLElement — vanilla JS
resetSortHandler: document.querySelector('.btn-reset-sort')

// React ref — React
resetSortHandler: myResetRef  // useRef<HTMLButtonElement>