Grid Layout - Number of cards per row

📘

Components

📘

Tip: Change LazyResults as well as StaticResults

Best practice is to change both files in case someone decides to change the settings to use LazyResults instead of StaticResults (or the other way around).

To change the number of columns within the search results container, you would need to change the 'withColumn' HOC like this:

/**
 * @module components/search/LazyResults
 */
import React, { Component, createElement } from 'react';
import { is, List, Map } from 'immutable';
import { connectItems } from '@findify/react-connect';
import { compose, withPropsOnChange, setDisplayName, withProps } from 'recompose';
import withTheme from 'helpers/withTheme';
import withLazy from 'helpers/withLazy';
import withColumns from 'helpers/withColumns';
import view from 'components/search/LazyResults/view';
import styles from 'components/search/LazyResults/styles.css';

export default compose(
  setDisplayName('LazyResults'),
  withTheme(styles),
  withProps(({ config }) => ({
    isMobile: window.innerWidth < config.get('mobileBreakpoint')
  })),
                     
  /* The withColumns mapper should return a divisor of 12,
     and the would be a number of columns present, so if you 
     return 12, then 12/12 = 1 - one column per row, 
     if you return 3, then 12/3 = 4 - four columns per row, etc. 
  */
  withColumns((width, props) => {
    /* Note: that width prop will contain the width of the search results
       container. If you want to use the full width of the screen, 
       then  you would need to use the windows.innerWidth
       
       props - this is an object that contains available components props
       so you can return value based on some prop, like:
       if (props.isMobile) {
        return 12 // return 1 column for mobile view
       }
    */
    if (width > 1280) return 3; // 4 columns
    if (width > 640) return 4; // 3 columns
    return 6; // 2 columns
  }),
  connectItems,
  withLazy(),
)(view);
/**
 * @module components/search/StaticResults
 */
import React from 'react';
import { compose, setDisplayName, withPropsOnChange, withProps } from 'recompose';
import { connectConfig } from '@findify/react-connect';
import withTheme from 'helpers/withTheme';
import withColumns from 'helpers/withColumns';

import view from 'components/search/StaticResults/view';
import styles from 'components/search/StaticResults/styles.css';

export default compose(
  setDisplayName('StaticResults'),

  withTheme(styles),

  connectConfig,
  
  withProps(({ config }) => ({
    isMobile: window.innerWidth < config.get('mobileBreakpoint')
  })),

  /* The withColumns mapper should return a divisor of 12,
     and the would be a number of columns present, so if you 
     return 12, then 12/12 = 1 - one column per row, 
     if you return 3, then 12/3 = 4 - four columns per row, etc. 
  */
  withColumns((width, props) => {
    /* Note: that width prop will contain the width of the search results
       container. If you want to use the full width of the screen, 
       then  you would need to use the windows.innerWidth
       
       props - this is an object that contains available components props
       so you can return value based on some prop, like:
       if (props.isMobile) {
        return 12 // return 1 column for mobile view
       }
    */
    if (width > 1280) return 3; // 4 columns
    if (width > 640) return 4; // 3 columns
    return 6; // 2 columns
  }),

)(view);