README

react-horizontal-scroll-grid

A simple UI component for React

<HScrollGrid gridWidth={400} gridHeight={100} cardWidth={100} backgroundColor="antiquewhite">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</HScrollGrid>

Demo

Alt Text

Changelog

Version	Compatibility
0.1.3	React 16.3+

Technical Documentation

Installing
Exports

Installing

npm install react-horizontal-scroll-grid

Exports

The HScrollGrid component can exported as follows:

import HScrollGrid from "react-horizontal-scroll-grid"

HScrollGrid

A HScrollGrid is a simple UI Wrapper Component which helps you to display in your <li> items in horizontal scroll view. It is completely css based implementation. The count of child elements is directly computed at componentDidMount stage and set using css variables.

HScrollGrid Props

Prop Name	Required	Default value	Description
gridWidth	Yes	`null`	Should be passed as `number`
gridHeight	Yes	`null`	Should be passed as `number` *
cardWidth	Yes	`null`	Should be passed as `number`
backgroundColor	No	`transparent`	Should be passed `String`

NOTE

gridWidth, gridHeight,cardWidth should be passed in as number since they are used as pixels in css.
Please be aware that by providing the value of gridHeight you are also setting the height of each child element to gridHeight i.e. Grid's gridHeight = card's gridHeight

Usage

import React from 'react';
import HScrollGrid from 'react-horizontal-scroll-grid';

const Example = () => {
    const keys = [1, 2, 3, 4, 5, 6];
    const cards = keys.map(elem => <li key={elem}> Test </li>);
    return (
        <>
            <HScrollGrid
                gridWidth={400}
                gridHeight={100}
                cardWidth={100}
                backgroundColor="antiquewhite"
            >
                {cards}
            </HScrollGrid>

            <HScrollGrid
                gridWidth={700}
                gridHeight={100}
                cardWidth={200}
                backgroundColor="antiquewhite"
            >
                {cards}
            </HScrollGrid>

            <HScrollGrid
                gridWidth={1000}
                gridHeight={300}
                cardWidth={400}
                backgroundColor="#ecf2a7"
            >
                {cards}
            </HScrollGrid>
        </>
    )
};

export default Example;