Skip to content

It helps you make responsive layout without any media query or using a third css library

Notifications You must be signed in to change notification settings

Alkaly02/react-flexible-list

Repository files navigation

My Skills

react-flexible-list

Installation 🚀 🚀 🚀

  npm install react-flexible-list

or

  yarn add react-flexible-list

Usage

import React from 'react';
import GridList from 'react-flexible-list';

const MyComponent = () => {
  return (
    <GridList
      resourceData={ ["By", "Lka", "Dev", "From", "Senegal"] }
      resourceItem={ (item) => <p>{item}</p> }
    />
  );
};
export default MyComponent;
Props Type Default Description
isLoading Boolean false Flag to indicate whether the component is in a loading state.
resourceItem React.FC<any> Required* React component responsible for rendering each resource item.
resourceData (string, object,number)Array Required* Array of data items to be rendered in the GridList.
loader React.ElementType Custom loader component to be displayed when isLoading is true.
skeleton React.ElementType Skeleton Custom skeleton component to be displayed when isLoading is true and loader is not provided.
emptyComponent React.ElementType EmptyList Custom component to be displayed when resourceData is empty.
gap Number 15 Column gap in pixels.
cardWidth Number 250 Width of each card in pixels.
minHeight Number 300 Minimum height of the grid container in pixels.
px Number 10 Horizontal padding of the grid container in pixels.
py Number 10 Vertical padding of the grid container in pixels.
mx Number 0 Horizontal margin of the grid container in pixels.
my Number 0 Vertical margin of the grid container in pixels.

About

It helps you make responsive layout without any media query or using a third css library

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published