allowOverlap
prop, whentrue
, allows overlapping grid items. #1470- Add
onDropDragOver
callback. #1395- Use this callback to dynamically adjust the
droppingItem
based on what is being dragged over. Returnw
andh
to adjust the item. It is then spread into the dropping placeholder. - This callback has the type:
onDragOver: (e: DragOverEvent) => { w: number, h: number } | false;
- Return
false
to short-circuit the dragover.
- Use this callback to dynamically adjust the
- Remove sorting when
compactType
isnull
. #1474 - Droppable fixes for Chrome behavior. #1442 #1448
- Allow
null
children as a convenience so that inline expressions don't break the library. #1296 - Various dependency upgrades.
- Add docs on using custom components as grid children.
- Note required class on resizable handles for proper styling.
- Ensure no negative positions are possible when compacting
- Fix resizing on mobile. This was caused by the
ref
refactor to remove ReactDOM in 1.2.3.- Fixes #1458
- Note: this upgrades
react-resizable
to3.0.1
, which like our other deps, is only compatible withReact@>=16.3
.
- Document new arity of
resizeHandle
((axis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => React$Element
) - Remove references to the deprecated
verticalCompact
prop
This version fixes a serious render bug in <WidthProvider>
. 1.2.3 should not be used.
- Fix failure to mount when layout is WidthProvider-wrapped and
measureBeforeMount
istrue
.- Ref: #1428
<WidthProvider>
no longer updates grid with if it has been set to 0. This prevents unnecessary updates if the grid is set todisplay: none;
. Thanks @405go #1427
- React-Grid-Layout is now fully compatible with
<React.StrictMode>
.- Usage of
ReactDOM
has been removed by usingReact.createRef()
inside RGL, and the newnodeRef
prop inreact-draggable
.
- Usage of
onResize
as changed in 1.2.1 did not correctly save the layout. This is now fixed.- As you might guess, we need more test coverage! PRs are very welcome, I'll buy you beers on Cashapp or Patreon or whatever you like.
We have created the React-Grid-Layout Organization! Therefore the repository has moved.
This organization will grow as time goes on, and also contains the dependencies of RGL.
- Use
classList
in Firefox onDragOver hack. #1310 - Fix
scale
property. Asscale
support was added to dependencies, this caused double-compensation for scale, causing the dragged element not to follow the cursor. #1393 - Fix horizontal compact mode issue where it inadventently would compact the bottom of the grid. This is not useful nor intended. Thanks @s4m3. #1390
- Fix
onLayoutChange
sometimes not triggering on resize. We weren't cloning the layout item before modifying it. Thanks @xcqwan. #1289
- Updated to the latest versions of all dependencies (enzyme, webpack, jest, flow).
- Held back React@17 as enzyme is not yet ready.
- You can now customize your resizable handle component as supported by
react-resizable
. For example:
<ReactGridLayout resizeHandle={<span className="custom-handle custom-handle-se" />} {...props} />
Thanks @typeetfunc #1303
- Fix
onDrop
handler not firing on Firefox if you drop over the placeholder.- Thanks @Charles-Lamoureux #1333
- Various example style fixes #1283 #1299
Republish to add dist/
folder for unpkg use.
- You can now place resizable handles on all corners. Use the
resizeHandles
prop, which is default['se']
(for 'southeast').- Allowable values are:
- 's' - South handle (bottom-center)
- 'w' - West handle (left-center)
- 'e' - East handle (right-center)
- 'n' - North handle (top-center)
- 'sw' - Southwest handle (bottom-left)
- 'nw' - Northwest handle (top-left)
- 'se' - Southeast handle (bottom-right)
- 'ne' - Northeast handle (top-right)
- These values may be combined, e.g.
['s', 'se', 'e']
, to place three handles on the bottom side, bottom-right corner, and right side.
- Allowable values are:
- Revert
containerPadding
change in #1138. This change was meant to be types-only, but it caused a behavioral change where the default value ofcontainerPadding
became[0, 0]
, notmargin
, which is default[10, 10]
. - Add a few more files to
npmignore
to improve package size.
React-Grid-Layout has been in 0.x
status for far too long. With the addition of some new features in this version and a breaking change, I thought it was time to move to a stable semver.
onDrop
callback now has a form more consistent with other callbacks.- Previous type:
(elemParams: { x: number, y: number, w: number, h: number, e: Event }) => void
- New type:
(layout: Layout, item: ?LayoutItem, e: Event) => void
- Thanks @ceberhar #1169
- Previous type:
- Dropping Node 8 compatibility and testing due to devDep incompatibilities
- Add
innerRef: React.Ref<'div'>
prop to expose a ref for the grid layout's outer div. Thanks @paul-sachs #1176 - Add
isBounded
property to prevent dragging items outside of the grid. Thanks @artembykov #1248
- Fix grid items stuck using percentages on first render. Thanks @rhbg #1246
- Fix
shouldComponentUpdate
interfering with droppability (#1152)
- New Enzyme test suite added to prevent regression. If you have time, we could really use more test cases that reflect your use cases!
shouldComponentUpdate
:- A too-aggressive implementation of
shouldComponentUpdate
was shipped in 0.18.0-0.18.1 (#1123), which did not compare thechildren
object. While this works well in many simple implementations of RGL, it breaks in more complex applications. - Reference equality of
props.children
andnextProps.children
is now added to<ReactGridLayout>
and<GridItem>
. If you wish to take advantage of the performance improvements from theshouldComponentUpdate
work, memoize your children. - A section has been added to the README explaining how this works.
- Fixed #1150, #1151.
- A too-aggressive implementation of
This release contains typedef changes only.
- Flow types:
- Make Props to
<ReactGridLayout>
and<ResponsiveReactGridLayout>
exact. - Fix loss of props refinement when passing through
WidthProvider
. - Fix Flow errors as surfaced in #1138.
- Modify examples to use types so that the above type error can't resurface
- Make Props to
Thanks to all of our maintainers for this big release. 0.18.0 contains a large number of bugfixes that users have been asking for. Please read the full list so you know what to expect. Some of the biggest improvements include fixing changes of isResizable
/isDraggable
without a remount (#892), fixes to prop changes on ResponsiveReactGridLayout
(#1090), shouldComponentUpdate
improvements for speed (#1123), improvements to droppability (#1127), and much more.
- You can now locally set
isDraggable
/isResizable
on astatic
item and it will have that property. This could be useful, but be sure to check your layouts if you usestatic
. Relates to #1060. shouldComponentUpdate
is now implemented on major components to improve render speed while you manipulate the layout. In our testing there are no issues. If you encounter one, please open an issue asap and we'll get it fixed. See #1123.
- You can now manipulate
isDraggable
/isResizable
without the child component remounting. We do this by always rendering the child<Resizable>
and<Draggable>
wrappers, optionally in adisabled
state. This feature has been heavily requested. #892 - The event is now passed as
e
on theonDrop
callback. #1065 - Pass
transformScale
toResizable
. #1075
- Fix handling of width changes in
ResponsiveReactGridLayout
. #1090- Fixes ignored changes of breakpoints and columns. See also issue #1083.
- Forbid layout change on click without drag. #1044
- Do not mutate
layouts
prop. #1064 - Ensure locally set
isDraggable
/isResizable
on aGridItem
overrides the global setting on the layout. #1060 - Avoid additional element jumping when an item is dropped. #1127
- Don't use
String#includes
for Firefox test. #1096
- Added
shouldComponentUpdate
to major elements for speed. Significant performance improvements while dragging. Started in #1032 and finished in #1123. - Internal refactor of dropping capability. It is now more predictable and uses similar unit labels (
left
,top
) to other features. #1128 - Upgrade devDependencies.
- Remove ESPower from test suite (not useful with Jest).
- Surround
navigator
check intry/catch
to avoid problems with mocked navigators #1057 - TransformScale is not applied properly while dragging an element #1046
It's been 18 months since the last release, and this is a pretty large one! For references on the items below, see https://github.com/STRML/react-grid-layout/milestone/1?closed=1.
Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, and for giving it a much-needed shot in the arm, and thanks to the rest of our contributors.
- Added ability to drag items into the grid from outside. #980. See the example.
- This is especially exciting as it opens up new "widget toolbox" use cases such as Example 14 with more intuitive interaction. Thanks @daynin.
transformScale
prop #987<ResponsiveReactGridLayout>
now supports margin-per-breakpoint #1016
onWidthChange
only called on breakpoint changes #770- Various movement bugs when compaction is off #766
- Don't fire
onDragStop
if an item is only clicked, not dragged #1023 - Fix infinite loop when dragging over a static element. #1019
- Both
react-draggable
andreact-resizable
dependencies are now React 16.9 compatible, as is nowreact-grid-layout
. - Webpack 4 #907
- Babel 7 #1013
- Flow 0.110 #995
- Jest #774
- Various build simplifications #773
- Various PR bots - thanks @daynin
- Fixed collision issue where items below could rearrange on a move.
- The root cause was "teleportation", or practically the same bug that leads to Pac-Man going through ghosts now and then. If a large element moves up by a few grid units, the space it vacates can suddenly become occupiable by an element below it. Rather than the collision happening properly, they exchange spaces atomically. The fix is to move items down one grid unit at a time to ensure this rearrangement does not happen.
- Thanks @torkelo for your hard work on this for Grafana 5, which I very unfortunately managed to break when refactoring for 0.16.1.
- Ref: #650, #739
- Added a "Toolbox" demo (thanks @jhob)
- Minor fix to
isUserAction
on certain types of compaction cascades (#714, #720, #729)
- Skip null items in processGridItem (#578)
- Resize is broken for grids with preventCollision: true, fixes #655 (#656)
- Minor refactoring
- Fix overriding of
onStart
behaviour (#707, thanks @ersel) - Fixed Flow type of WidthProvider
- Devdep updates
- Fix
onLayoutChange
not firing properly due to regression introduced in 0.16.1 - Simpler resize corner CSS (thanks @TrySound)
- Reformat code with Prettier & simplify lint configs (thanks @TrySound)
- Flow def upgrades (thanks @TrySound)
- DevDep upgrades
- Fixed WebpackBin demo
- Addl test cases (thanks @torkelo)
- Added horizontal compaction option,
compactType
(thanks @Rhjulskov) - Added
preventCollision
option for static grids (thanks @EmrysMyrddin)
- Fix missed
import *
- Dependency updates
- Fix React PropTypes & createClass warnings
- Package upgrades, including Webpack 3
- Flow typedef upgrades for the 0.53 rework
- Add faulty key value in duplicate key error message (#602)
- Fixed a dragging bug when the grid container is scrollable. Thanks @chultquist.
- Fixed a bad publish (connectivity issue).
- Moved to
prop-types
package to avoid React.PropTypes deprecation in 15.5. Thanks @inverts!
- Typecheck in
WidthProvider
to satisfy Flow (and technically, this could be a Text node)
- Update Flow
- Reverted #499;
msTransform
is indeed correct. See discussion.
- Fixed use of
MSTranform
for IE. Thanks @dvoaviarison (#499) - Fix generation of source maps, which was temporarily broken by the webpack 2 upgrade.
- Update development dependencies and babel version.
- Fixed a minor Flow type issue when a
classnames
typedef is present. - Fixed a scoping issue when running
make build-example
.
- New test suite - thanks @nikolas
- Dev Dependency updates
- Committed yarn.lock
- Added
react-draggable
classname to draggable grid items.
- Fixed sorting of layout items, which could be different in IE if two items have the same x & y coordinate.
- See #369.
- Fixed breakage introduced in
0.13.7
when items are added without a layout ordata-grid
property.- See #368.
- Fixed an error during layout sync if children was a keyed fragment or had nested arrays.
- Fixed
onLayoutChange
being called when layout didn't change. - Fixed some issues with input layout items being modified in-place rather than cloned.
- Minor typos.
- Fixed missing HTMLElement in
onResize*
callbacks.
- Fixed a few Flow typing errors in
WidthProvider
.
- Fixed potential call to
ReactDOM.findDOMNode(this)
after unmount ofWidthProvider
. - Fixed an issue where layout items using
data-grid
could rearrange on mount depending on how they were ordered.- See #342 for reference.
- Fixed
lodash.isequal
import, which was ruined by case-insensitive HFS+ shakes fist
- Diffing children in order to regenerate the layout now diffs the
key
props and their order.- This will catch more changes, such as sorting, addition, and removal.
- Only pass
className
andstyle
to WidthProvider. Other props were not intended to be supported.- I'm aware this could be a breaking change if you were relying on this bad behavior. If so, please
use your own
WidthProvider
-style HOC.
- I'm aware this could be a breaking change if you were relying on this bad behavior. If so, please
use your own
babel-plugin-transform-flow-comments
had limited support for defining types like transpiled classes.- This has been updated to instead copy source to
.js.flow
files, which preserves all type information.
- This has been updated to instead copy source to
- Fix remaining
propTypes
warnings.
- Due to a change in React 15.2, passing the
_grid
property on DOM children generates an error. To compensate, we now error on the same and suggest usingdata-grid
instead. Simply change any use of_grid
todata-grid
, or add your properties to the layout.
- Fix React 15.3 warning re: propTypes.
- Prevent extraenous rerenders in
<ResponsiveReactGridLayout>
by using deep equality on layouts.
- Fix blindingly obvious bug where mounted isn't set to true. Smack forehead.
- Fixes for server rendering checksum failures.
- Update to React-Draggable v2. Fixes: #241, #239, #24
- v2 contains a number of bugfixes & enhancements for touchscreens, multitouch, and scrolling containers.
- Bugfix: Rendering with new
breakpoints
/cols
does not refresh the layout. Fixes #208 - thanks @damienleroux
- Bugfix: Fix warning about undefined
useCSSTransforms
when server-rendering.
- Bugfix: Don't set
layout
twice on width change. See #217 - thanks @damienleroux - Enhancement: Add Flow type comments
<ReactGridLayout>
will no longer animate so severely on mount. See #212.- If you are using
<WidthProvider>
, you may notice that the container's width still shunts on mount. If you like, you may delay mounting by settingmeasureBeforeMount={true}
on the wrapped element. This will eliminate the mounting animation completely. - If you enjoyed the old animation, set
useCSSTransforms={this.state.mounted}
and toggle the mounting flag. See0-showcase.jsx
for an example.
- If you are using
- Set more permissive version ranges for
<Draggable>
and<Resizable>
dependencies, as they are now stable and will only introduce breaking changes on major version ticks.
- Officially support React v15.
- Bugfix: Draggable cancel selectors, see #203 - thanks @RiiD
- README fixes, thanks @bravo-kernel & @ro-savage
- Bugfix:
<ResponsiveReactGridLayout>
was using stale data when synchronizing children with the layout on a breakpoint change.
This release contains potentially breaking changes so I have updated the minor version (as per semver).
Breaking Changes:
- Layout items now have a fixed set of properties. Other properties will not be merged into the
<GridItem>
, such asclassName
. To set aclassName
on a child, set it on the child directly and it will be merged. This allows us to make better assumptions about the layout and use a faster cloning mechanism. - Setting individual
handle
andcancel
selectors per item is no longer supported. If you need this, please open a ticket and let me know your use case.
Other changes:
- Bugfix:
<ResponsiveReactGridLayout>
onLayoutChange
callback data could still be stale. - Bugfix: Range error when building layout solely from
_grid
properties.- This broke a lot of usage and thus
0.10.11
and0.10.10
have been unpublished.
- This broke a lot of usage and thus
- Removed redundant
isPlaceholder
property from<GridItem>
. - README updates to clarify layout/_grid usage.
- Bugfix:
layouts
param on<ResponsiveReactGridLayout>
'sonLayoutChange
could have stale data for the current breakpoint.
- Performance: Prevent V8 deopt in a few methods and add fast layout item cloning.
- Bugfix: Typo in children comparison in CWRP. See #169.
- Bugfix: Missing babel-preset-es2015 in dev.
- Rebuild using ES2015 Loose Mode.
- Bugfix:
className
andstyle
props on grid children were being incorrectly dropped, a holdover from whencloneWithProps()
used to do this merging for us. They are now merged.
- Bugfix: If both
props.layout
andprops.children.length
change in the same tick, props.layout would be clobbered. See #162
- Bugfix/Enhancement: Margins were causing subtle error in some of the positioning calculations. This has been fixed.
- Bugfix: Container height was calculated as less than expected due to improper addition of margin.
- Bugfix: Round item positions even if they're currently resizing or dragging (#158, regression of #141)
- Bugfix: Fix a positioning bug when margins are 0 (#160)
- Bugfix: would synchronize children with layout if the layout in props didn't match the state; this was meant to be a hook for the developer to supply a new layout. The incorrect check could cause the layout to reset if the parent rerendered. The check is now between the layout in nextProps and props.
- Bugfix: Fixed a lot of resizing layout bugs; most of the fixes are in react-resizable.
- Bugfix: Fixed incorrect typecheck on LayoutItem.i.
- Bugfix: Make onLayoutChange fire appropriately (#155).
- Bugfix: Fix
<ResponsiveGridLayout>
not properly reverting when sizing the page up (#154). - Remove unused
offsetX
andoffsetY
from layouts. - Dependency updates.
- Hotfix for default export incompatibility caused by Babel 6.
This long-awaited release provides React 0.14 compatibility and a rewrite of the underlying
<Draggable>
functionality.
Breaking changes:
ListensToWidth
replaced withWidthProvider
which must wrap<ResponsiveReactGridLayout>
and<ReactGridLayout>
to provide width data. See doc for example.- Prop
initialWidth
renamed towidth
. - Grid Layout keys must be type of string now.
Other changes:
- Finally compatible with React 0.14! Big thanks to @menelike for his help.
- Upgraded to Babel 6.
- Full typechecking via Flow.
- Lots of misc bugfixes.
- See beta releases below for more details.
- Fixed a React import bug on ListensToWidth.jsx (#130; thanks @mrblueblue)
This release is unstable!
- React 0.14 compatibility.
- This release includes a rewrite of much of the project in ES6/7 style with Flow typing.
- This release brings us onto mainline (1.x) react-draggable and react-resizable, eliminating the previous github dependency.
- 0.10.0 is not yet complete. Use this release at your own risk.
Known bugs:
- The placeholder box does not properly follow the mouse and stays pinned to the active drag.
- Update
react-draggable
tov0.8.0
to fix IE11 issues (#29).
- Update
react-draggable
tov0.7.3
to fix a bounds bug (#56).
- Move off
react-draggable
fork to mainlinev0.7.2
. Incremented minor (major in the case of npm's^
, since we are pre-v1) version in case of unforeseen conflicts.
- Add
verticalCompact
toggle.
- Fix a crash when initializing with no children.
- Fixed React 0.13 warning about
isMounted()
. - Update to babel 5.
- Added browser build for use with a
<script>
tag or in RequireJS builds. - Pinned react-draggable version in anticipation of React 0.13 update.
- Changed signature on resize/drag callbacks to allow dynamic max/min W/H per item.
- Fixed bug in
useCSSTransforms
. - Documentation and example fixes.
- Added callbacks for resize and drag start/active/stop.
Breaking changes:
ReactGridLayout.props.handle
renamed toReactGridLayout.props.draggableHandle
.
This version contains a CSS update. This fixes a visual bug where you may see items quickly reset position and animate back to their original position on load, when you are using CSS transforms. To fix this bug, copy the rules from css/styles.css into your stylesheet.
Other changes:
- Fixed #19 (bad new item placement with css transforms).
- Fixed some placement inconsistencies while RGL is mounting, with css transforms and percentages.
- Fixed a duplicate className bug.
- Fix #21 (error when passing only a single child).
- Add GridItem.props.cancel.
- Use React addons directly to save file size.
- Allow setting draggable/resizable per grid item, as well as existing
static
property. - Use object.assign to set
_grid
properties so we can more easily merge PRs in the future.
- Fixed #8 (current layout was not properly being stored when provided via _grid props).
- Optionally use CSS transforms for placement, fallback on position top/left.
- Allow parent to set responsive breakpoint directly.
- Fix Responsive import for node users
- Add support for min/max dimension attributes.
- Example tweak
- Refactoring and demo tweaks. Update README with new params.
- Add showcase example, tweak template
- Refactor: Responsive Grid Layout is a separate element
- Auto-generate examples from template rather than edit them individually.
- Force lodash into commons chunk
- More tweaks to grid collisions. This should fix bad swaps once and for all.
- Set unused:"vars" in lint.
- Add responsive localstorage example and
initialLayouts
support. - Fix localstorage example comment.
- Rework responsive layouts, identify child elements by key rather than index. Added 2 new examples.
- Fixup GridItem resizing feel a bit.
- Early development versions, too many changes to list.