jamiebuilds / React Gridlist
Licence: mit
A virtual-scrolling GridList component based on CSS Grids
Stars: ✭ 394
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Gridlist
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+998.73%)
Mutual labels: list, grid, grid-layout
vue-virtual-stream
Simple vue-virtualized package for Vue.js
Stars: ✭ 16 (-95.94%)
Mutual labels: list, listview, virtual
React Virtualized
React components for efficiently rendering large lists and tabular data
Stars: ✭ 22,963 (+5728.17%)
Mutual labels: list, grid, listview
react-recycled-scrolling
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks
Stars: ✭ 26 (-93.4%)
Mutual labels: list, listview, scrolling
flex-box-grid
Responsive, mobile first Flexbox Grid
Stars: ✭ 39 (-90.1%)
Mutual labels: grid, grid-layout
60gs
60GS - 60 Columns Grid System based on CSS Grid Layout
Stars: ✭ 65 (-83.5%)
Mutual labels: grid, grid-layout
tb-grid
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Stars: ✭ 19 (-95.18%)
Mutual labels: grid, grid-layout
DPVideoMerger-Swift
Multiple videos merge in one video with manage scale & aspect ratio and also merge videos to grid matrix layout for Swift.
Stars: ✭ 49 (-87.56%)
Mutual labels: grid, grid-layout
cgridlistctrlex
MFC Grid control using a custom draw CListCtrl with subitem editing and formatting
Stars: ✭ 80 (-79.7%)
Mutual labels: grid, listview
grid-layout
grid-layout is a layout engine which implements grid, can use in canvas/node-canvas
Stars: ✭ 43 (-89.09%)
Mutual labels: grid, grid-layout
react-native-reseau
[WIP] An ios-like grid view based on react-native.
Stars: ✭ 13 (-96.7%)
Mutual labels: list, grid
react-native-gridview
A React Native component that renders a grid of items. It uses ListView under the hood.
Stars: ✭ 16 (-95.94%)
Mutual labels: grid, listview
grid-container
A grid for the future, CSS Grid Layout + Web Components (Custom Elements v1 + Shadow DOM v1)
Stars: ✭ 51 (-87.06%)
Mutual labels: grid, grid-layout
gridbugs-ru
Перевод списка багов в CSS Grid Layout, курируемого Рейчел Эндрю
Stars: ✭ 27 (-93.15%)
Mutual labels: grid, grid-layout
ReactSimpleFlexGrid
A way to quickly add a Grid Layout to your React app 🚀
Stars: ✭ 185 (-53.05%)
Mutual labels: grid, grid-layout
recyclerview-list-drag-and-drop
No description or website provided.
Stars: ✭ 50 (-87.31%)
Mutual labels: list, listview
React Virtual List
Super simple virtualized list React component
Stars: ✭ 597 (+51.52%)
Mutual labels: list, virtual
recycler-adapter
RecyclerView-driven declarative UIs
Stars: ✭ 124 (-68.53%)
Mutual labels: list, listview
React GridList
A virtual-scrolling GridList component based on CSS Grids.
- Render anything (not just images) of a known width/height inside.
- Variable height items in the same row.
- Highly performant virtual scrolling (aka windowing) for buttery smoothness.
- Customizable & Responsive.
- Very small bundle size
Install
npm install --save react-gridlist
Example
import React from "react"
import GridList from "react-gridlist"
function getGridGap(elementWidth: number, windowHeight: number) {
if (elementWidth > 720 && windowHeight > 480) {
return 10
} else {
return 5
}
}
function getColumnCount(elementWidth: number, gridGap: number) {
return Math.floor((elementWidth + gridGap) / (300 + gridGap))
}
function getWindowMargin(windowHeight: number) {
return Math.round(windowHeight * 1.5)
}
function getItemData(image: Image, columnWidth: number) {
let imageRatio = image.height / image.width
let adjustedHeight = Math.round(columnWidth * imageRatio)
return {
key: image.url,
height: adjustedHeight,
}
}
function Example(props) {
return (
<GridList
items={props.images}
getGridGap={getGridGap}
getColumnCount={getColumnCount}
getWindowMargin={getWindowMargin}
getItemData={getItemData}
renderItem={(image) => {
return (
<img
src={image.url}
width={image.width}
height={image.height}
className={styles.image}
/>
)
}}
/>
)
}
Fixed Column Width
You can also pass a fixedColumnWidth
to lock the columns to a specific pixel
width.
<GridList
// ...
fixedColumnWidth={300}
/>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].