RGL v2 Megathread

[STRML]

Everyone,

Thanks so much for your use of React-Grid-Layout and a special thank you to all of you who have opened pull requests.

I haven't been able to spend as much time on this repo as I had hoped, as it fulfills our rather humble layout needs at BitMEX quite well. Yet I understand that some of you have more specific needs and I would like to address those.

There are a large number of open issues that generally follow the same pattern:

• Confusion about input options or callbacks, especially layout vs. data-grid/_grid,
• Confusion about mutation of internal layouts
• Issues when using custom components as grid children
• Lack of extension points

I would like to address these issues with a minor rewrite in RGL v2 (yeah - skipping v1, we've been in 0.x for two years).

React-Grid-Layout v2

RGL v2 has the following list of design goals:

Major Changes:

The primary goal of RGL v2 is to expose a set of simple, overridable components to make custom behavior easier to implement. I'd like to allow creation of new compactors, or even new layout mechanisms (top/left vs transform, or even global CSS munging).

• Pluggable implementations:
  • Compactor
  • DOM layout ((l: LayoutItem, props) => props)
  • CSS transition support (Fading in/out grid items on add/remove (CSSTransitionGroup?) #571)
  • Any others?
  • Could this even be per-item?
• One, and only one way of defining a grid: via input to an exposed <GridItem> component.
  • A <GridItem> takes a layout property with the normal ({w: number, h: number...}) shape.
  • A <GridItem> always renders a <div> child so we can be assured that styles are settable no matter the item's children.
  • This component's implementation should be overridable (by extending the class) with a well-defined API.
  • This should serve as the primary extension point for implementing custom behavior.
  • This may serve as a way to pass items from one grid to another - while React will internally reset the state of the component, which could be problematic, it should be relatively easy to simply build <GridItem>s by spec and transfer them from one grid to another in the parent's render().

Minor Changes:

• Expose utils and other internal functions. Allow a new implementation to be passed into the layout. This could look something like:

import {utils} from 'react-grid-layout'
// ...
utils.somethingToOverride = function()...
<ReactGridLayout __utils={utils} ...

Thoughts on this? Are other libraries doing something like this for custom behavior?

• Pass pre- and post- compaction data in callbacks - see onDragStop is called with incorrect newItem #345 - or should we allow hooking into the compactor somehow?
• Docs: Define grid lifecycle clearly and customization points

Comments

For those of you who use RGL in production or any other projects, what do you see in other grid libraries? What would you like to see inside RGL? We can't provide the same featureset as some jQuery grids, for example, due to React's ownership model, but we can provide a library that's easy to use an extensible.

If anyone is excited by this idea, please ping me below! I could really use help making this happen as my day job takes up all of my time.

[cp]

This all seems great, thanks for putting it together. I'd love to help out wherever I can.

The note about hooking into the compactor caught my eye. I know we're going to need to build horizontal compaction into our RGL implementation, so having a method for somewhat easily doing so could be great.

Exposing the option to override utils seems like an interesting idea. I'll look around and see if I can see any other examples of that. I can definitely see a couple pros and cons.

Will pass this around a couple other members of my team to see if they have anything to add. Cheers!

[STRML]

Thanks Colby, I would appreciate any help I can get on this - hoping we
could insert these customization hooks as easily as possible, but it
will require some cleaning up and (finally) some unit tests. At the very
least we can start doing snapshot testing.

Colby Aley mailto:notifications@github.com
September 12, 2016 at 9:32 AM

This all seems great, thanks for putting it together. I'd love to help
out wherever I can.

The note about hooking into the compactor caught my eye. I know we're
going to need to build horizontal compaction into our RGL
implementation, so having a method for somewhat easily doing so could
be great.

Exposing the option to override |utils| seems like an interesting
idea. I'll look around and see if I can see any other examples of
that. I can definitely see a couple pros and cons.

Will pass this around a couple other members of my team to see if they
have anything to add. Cheers!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#346 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABJFPxnLwhKe9_g1LF7VNIPLipAeb4Ouks5qpWJsgaJpZM4J6KUh.

[r3ifi3r]

Just wanted to chime in and say I'm definitely excited about all of this! I'm in the middle of developing a production app with RGL as a centerpiece. I really appreciate all the work that's been done to make this library what it is today, and I completely sympathize with any time constraints you have @STRML. Not sure how much or at what capacity I can contribute, but I would like to help.

[nikolas]

I've gotten unit testing set up in this PR: #442

I only wrote a few initial unit tests for some of react-grid-layout's utility functions, but it will be easy to add more.

[STRML]

You rock! Thanks for doing this, probably one of the most embarrassing omissions from this repo. Will review next week when I'm back from vacation.

…

Nik Nyby ***@***.***> December 14, 2016 at 2:53 PM I've gotten unit testing set up in this PR: #442 <#442> I only wrote a few initial unit tests for some of react-grid-layout's utility functions, but it will be easy to add more. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#346 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABJFP2ojkqlkyeFngpfySxwnRFRcaG80ks5rIElMgaJpZM4J6KUh>.

[nikolas]

Yeah, no hurry. I'm currently working on a project that's making heavy use of this library, so I may be submitting more PRs but there's no urgency - I'm using my own branch for now.

[STRML]

Cool. Happy to take these PRs. In the future I want RGLv2 to support a plugin ecosystem so that features like your `preventCollision` option can be implemented as, say, mixins into `<GridItem>` and hosted as separate projects. Would like to open up a whole realm of customization. Just food for thought. Still figuring out how to do that in the safest way.

…

Nik Nyby ***@***.***> December 14, 2016 at 3:41 PM Yeah, no hurry. I'm currently working on a project that's making heavy use of this library, so I may be submitting more PRs but there's no urgency - I'm using my own branch for now. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#346 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABJFPzODy4iM908X2YpgNyQqwB1LgA2wks5rIFRzgaJpZM4J6KUh>.

[Kurdakov]

I'm just start to use react-grid-layout, but
the feature I think about is 'sticky static' elements which a) retain relative position on screen (top,bottom, left center) b) do not collide with other elements (but switchable - so that it would be possible to pro grammatically enable 'collision') (thus allowing to implement sticky headers,sidebars etc ).
this, in my opinion will provide an ability to create 'whole pages' of sites with just alone react-grid-layout using tools like http://damienleroux.github.io/react-grid-layout-builder/demo/

though if it would be possible to extend RGL via mixin plugins ( maybe extending via higher order components? that will be great ) to add new behaviors by user (say adding sticky behavior like implemented in https://github.com/captivationsoftware/react-sticky ) - then maybe only some additional properties like a property 'not to collide' (float above) with other squares or 'stretch over page' would be needed -properties will reside in GridItem, but behaviors will be implemented in mixins

[chrisdrackett]

@STRML is any of the work here in process? I'd love to help out, but I don't want to duplicate work, so curious of the status!

[STRML]

@chrisdrackett Thanks for checking in. It's not in progress at the moment, unfortunately.

I just haven't had the time to sketch out what the API should look like. My main concern is in giving developers a powerful and stable enough API to support a vibrant plugin infrastructure, so the (many) possible use cases for RGL don't have to live in core.

Would be very welcome to hear your thoughts & ideas.

[chrisdrackett]

our main pain points at the moment revolve around layout. I want access to the layout values in GridItems so I can change styles depending on the props and current state (dragging, hover). However, it seems that if data-grid is set on the children and then changed the grid does not update? We're working on trying to figure out what is going on, but I thought this proposal to simplify sounded good.

[nikolas]

@chrisdrackett that sounds like it could be the same issue noted at #382. I worked around it in this way: #382 (comment)

[boui]

If any ideas accepted yet there are couple of ideas and major pain points:

1. Consider adding GridItems of a constant height. Unlike maxH property, there would be great to have height in pixels.
2. Check in onLayoutChange based on length of layout, consider to make it check xywh if it is possible, pluggable check is also an option.
3. Absolute positioning of GridItems creates a problem with z-index for inner components of griditem. Flex instead of 'translate' would be great. Details here - https://stackoverflow.com/questions/16057361/how-to-make-child-element-upper-than-parent-with-z-index

WDYT?

[boui]

Hi! Any updates here?

[jcrben]

Hopefully version 2 has some progress on allowing for flexible height out of the box. #190

I really like the document flow of the DOM. It's what I am used to for layout. Absolute position items for layout introduces some complexity.

[tambaqui]

It would be interesting to include some accessibility methods and options in the API:

• Possibility of moving elements one position (up, down, left, right) without dragging.
• Mutate the DOM when the layout changes to reflect the cascading order from top/left to bottom/right, or include aria-flowto attributes to indicate the reading order for users with screen readers.

[kerwitz]

So, is this still going to happen? Looking at the pull requests and open issues this project seems to be dead, or isn't it?

[webberwang]

There's too many issues that are just questions at how to use the library, many questions are more suitable for stackoverflow instead. Are there some moderators that can close questions as opposed to actual bugs/issues?

[n1ghtmare]

@webberwang We're doing our best on moderating the issues, however additional help is always welcome. It would be great if you have some time to lend us a hand. Tagging, answering, etc. would be a great help.

[jonlepage]

yes the way this lib was build is real pain, too many abstraction, weird architecture and not enough exposes.
Actually i found my way for hack , replace or extends stuff but its ugly and not optimal at all.

import { ReactElement } from 'react';
import type RGLUtils from "../../../node_modules/react-grid-layout/lib/utils"; // type hack
import GridLayout from 'react-grid-layout';

// expose abstract stuff manually for future hack
export const GridLayout2 = GridLayout as unknown as typeof GridLayout & {utils: RGLUtils};

Am curious to see if there more good dirty hack to replace prototype or function in the libs !?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days