Hozirontal Cards package

Overview

The inspiration behind this React package stems from the observed absence of a convenient horizontal scroller list component in the React ecosystem. This package addresses this gap by providing a seamless solution to display items from a list in the form of infinitely scrolled cards. If you're looking to enhance user experience by incorporating a horizontal scrolling feature for your lists, this package is tailored to meet your needs.

Features

• Horizontal Scrolling: Easily implement a horizontal scrolling list of items, offering a modern and intuitive user interface.
• Infinite Scroll: The package enables the infinite scrolling of cards, providing a smooth and continuous browsing experience for users.
• Customizable: Tailor the appearance and behavior of the scroller to align with your application's design and requirements.
• Efficient Rendering: Benefit from optimized rendering to ensure a responsive and performant user interface, even when dealing with large datasets.

Installation

To integrate the Horizontal Cards into your project, follow these simple steps:

npm install horizontal-cards

or

yarn add horizontal-cards

Usage

To effectively integrate the package into your project, it is recommended to follow these three straightforward steps.

1. Import the HorizontalCards component:

Import the HorizontalCards component from the package in your file as demonstrated below:

import HorizontalCards from 'horizontal-cards';

2. Prepare Your Display List:

Create a list that you intend to display using the HorizontalCards component. The list should be an array of objects, each containing "title" and "description" properties.

For instance:

const inputList = [
	{title: "Item1", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard..."},
	{title: "Item2", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard..."},
	{title: "Item3", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard..."},
	{title: "Item4", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard..."}
];

3. Insert the HorizontalCards Component:

Finally, insert the HorizontalCards component into your code and provide your prepared list to the data prop. Here's an example:

<HorizontalCards data = {inputList} />

Feel free to explore additional props available for customization, which are detailed in the props table. Customize the appearance and behavior of the HorizontalCards component by choosing the right colors to suit your project's needs.

Props table

Example

import HorizontalCards from 'horizontal-cards';
function App() {
  const inputList = [
    {title: "Item1", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard..."},
    {title: "Item2", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard..."},
    {title: "Item3", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard..."},
    {title: "Item4", description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard..."}
  ];
  return (
    <div className="App">
      <HorizontalCards 
        data = {inputList}
        bgColor="black"
        lineColor="#5e5e5e"
        titleColor="white"
        descriptionColor="#f5e7c9"
      />
    </div>
  );
}

export default App;

Live demo

Experience the live demo of the package by visiting the demo website here, where you can interact with the application's features in real-time.

License

Horizontal Cards package is released under the MIT license.