React-flexible-list NPM

react-flexible-list

Installation :rocket: :rocket: :rocket:

  npm install react-flexible-list

  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.