react-flatlist-ui v1.4.1

FlatList is a utility component UI that makes it easy to handle data rendering lists, and it makes grouping, sorting, UI expansion, styling, and more ...

It is also easy to process the number of data corresponding to media srceen on the screen

react-flatlist-ui

Install

npm install react-flatlist-ui

yarn add react-flatlist-ui

How to use

// This dummyData
dummyData = [
  { id: 1, name: "Correia", img: "https://images.unsplash.com/photo-1234568" },
  { id: 2, name: "Sam", img: "https://images.unsplash.com/photo-1234568" },
  { id: 3, name: "John", img: "https://images.unsplash.com/photo-1234568" },
  { id: 4, name: "James", img: "https://images.unsplash.com/photo-1234568" },
  { id: 5, name: "Steam", img: "https://images.unsplash.com/photo-1234568" },
  { id: 6, name: "Hwan", img: "https://images.unsplash.com/photo-1234568" },
  { id: 7, name: "John", img: "https://images.unsplash.com/photo-1234568" },
  { id: 8, name: "Key", img: "https://images.unsplash.com/photo-1234568" },
  { id: 9, name: "Min", img: "https://images.unsplash.com/photo-1234568" },
  { id: 10, name: "Ellan", img: "https://images.unsplash.com/photo-1234568" },
];

We get the values of dummyData through the data in FlatList, and we pass the unique key values to the keyExtractor, and we get the components through randerItem. This allows you to experience a higher level of performance by taking notes of data.

🔥👍This method is very similar to FlatList in React-Native. Try FlatList in React.js right now🔥👍

import FlatList from 'react-flatList-ui';

...
function App() {
  return (
    <FlatList
      direction="horizontal" // Vertical or horizontal
      data={dummyData} // Data
      dataCount={dummyData.length} // Data count or length
      loading={false} // This Loading State
      keyExtractor={(item) => item.id} // Item key
      renderItem={(item) => <Item name={item.name} img={item.img} />} // Rendering items
      listLoadingComponent={<p>loading...</p>} // loading: true components shown
      ListHeaderComponent={<h1>Title: FlatList</h1>} // Rendered at the top of all the items
      ListFooterComponent={<span>data finish ...</span>} // Rendered at the bottom of all the items
      ItemSeparatorComponent={{<div style={{width:'100%', height:1, backgroundColor:'#eeeeee'}}></div>}} // Components between data
      ListEmptyComponent={<p>Data does not exist ...</p>} // If noneData : view component
            itemHorizontalCount={{ desktop: 3, tablet: 2, mobile: 1 }} // Uf horizontal : media screen data count
      gap={15}
      crossGap={15}
      padding={{ all: 16 }}
      margin={{ bottom: 20 }}
      itemScrollActive={true} // Scroll Active
      listScrollbarView={false} // Scrollbar
    />
  );
}
...

Use Documentation

License

MIT © Deepfactory, Inc. See LICENSE for details.