react-stack-grid - Pinterest like layout components for React.js

  •        1021

Pinterest like layout components for React.js. You can install the react-stack-grid from npm.

https://github.com/tsuyoshiwada/react-stack-grid#readme
https://github.com/tsuyoshiwada/react-stack-grid

Dependencies:

easy-css-transform-builder : ^0.0.2
exenv : ^1.2.1
imagesloaded : ^4.1.1
inline-style-prefixer : ^3.0.6
invariant : ^2.2.2
prop-types : ^15.5.10
react-sizeme : ^2.2.0
react-transition-group : ^1.2.0
shallowequal : ^1.0.1

Tags
Implementation
License
Platform

   




Related Projects

react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

  •    Javascript

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

  •    Javascript

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

  •    Javascript

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

reflexbox - React flexbox layout and grid system

  •    Javascript

Primitive for controlling width, margin, padding and more. Both <Flex /> and <Box /> share the same props.

react-native-photo-browser - Local and remote media gallery with captions, selections and grid view support for react native

  •    Javascript

A full screen image gallery with captions, selections and grid view support for react-native. Layout and API design are inspired by great MWPhotoBrowser library. The component has both iOS and Android support.


styled-css-grid - 🍱 A tiny CSS grid layout for React

  •    Javascript

A tiny (~2kb) CSS grid layout for React, built with styled-components 💅. See the website.

mauerwerk - ⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions

  •    Javascript

These two would work outside the Grids context if you wanted to use them elsewhere. mauerwerk depends on react-spring and react-measure.

autoresponsive-react - Auto Responsive Layout Library For React

  •    Javascript

Auto responsive grid layout library for React.See our CONTRIBUTING.md for information on how to contribute.

grid-styled - Responsive React grid system built with styled-system

  •    Javascript

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

react-mdl - React Components for Material Design Lite

  •    CSS

This library is now deprecated. It's higly recommended to use Material Design Components instead. Instead of using the official material.css and material.js files from the MDL project, you should use the files we provide in /extra. The reason to that is because the official Layout component is not fully compatible with React. We made a patch and we re-exported everything so people can still use it. If you're worried about the changes we made, you can take a look at the patch note or read about the issue in this ticket.

react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

  •    Javascript

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.

react-native-easy-grid - Easy React Native Layout & Grid for the Dumb

  •    Javascript

This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

react-native-super-grid - Responsive Grid View for React Native

  •    Javascript

Responsive Grid View for React Native. This component renders a Grid View that adapts itself to various screen resolutions.

revogrid - Powerful virtual data grid smartsheet with advanced customization

  •    TypeScript

Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use. The RevoGrid component helps represent a huge amount of data in a form of data table "excel like" or as list. On top of it it provides inbuilt range edit or per cell edit, keyboard support and custom edit and render features. Works in any major framework or with no framework at all.

react-native-grid-view - React Native Grid/Collection View component

  •    Javascript

This component allows to display a grid/collection of items with more than one item per row. The items per row is configurable and it uses a 'ListView' in order to have a proper recycle mechanism.

waterfall.js - Tired of use creepy hacks or heavy ways to get a Grid based on Pinterest?

  •    Javascript

This question has a good point. Yes, there are CSS ways to solve this, using flexbox or columns technic, but this doesn't work well when you don't know about your data/structure. So we have to use JavaScript. The challenge is create a decent algorithm where the structure doesn't matter: Waterfall will work. ⚠️ The latest stable is waterfall-1.0.2 (which is used in the website), newest versions are suffering issues from a major rewrite.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.