React Spaces

View on GitHub NPM version


See release notes for compatibility notes.

  • Major refactor of library to fix React state side effect issues
  • Added tests to library for core functionality
  • Revised resize handle placement/functionality
  • Various bug fixes


  • Fixed overlayHandle property on resizable spaces which was broken in 0.1.25


  • Ensure proptypes added as direct dependency to library


  • Fixed issue where handleSize property was not being passed to internal ResizeHandle component


  • Fix for onResizeStart and onResizeEnd events broken in last release


  • Removed old demo project
  • Removed NextJS demo project
  • Added storybook
  • Refactored components


  • Added


  • Fixed generation of head styles height and z-index which were missing a semi-colon.


  • Added Custom space to allow access to all space properties.
  • Allowed false to be returned from onResizeStart event callback to conditionally cancel resize operation.


  • Added onMouseMove, onTouchStart, onTouchMove and onTouchEnd events.


  • Moved child state and recalculation of child spaces to the parent space to remove synchronisation issues causing various update issues.
  • Moved space styles to document head to generate cleaner mark-up. All spaces now get a auto-generated short ID which can be overriden with the id property on a space.
  • Removed the need for an outer and inner container on all spaces except for when a space is resizable and scrollable to allow the space to maintain the resize handle location.
  • Optimised touch resize actions preventing default browser actions using css touch-action and changing debounce to throttling on resize updates.


  • Fix to ensure spaces in same parent are updated when a space zIndex is adjusted. (issue / pull request)


  • Added resize start and end events (issue / pull request)
  • Fixed useContext hook being used within condition expression causing 'React has detected a change in the order of Hooks called by SpaceInternal' error when zIndex property updated on space (issue / pull request)
  • Fix to ensure debounced resize (mouse/touch) events do not fire after mouse up or touch end events have fired. (pull request)
  • Fix to ensure mouse up and touch end events are unbound after a resize operation has completed to prevent multiple event handlers being bound on every resize operation. (pull request)


  • Fix to ensured resize delta is reset when size property changed on anchored and resizable spaces (issue / pull request)
  • Added PropTypes for all exposed components for Javascript only consumers in addition to the Typescript typings in the library. (issue / pull request)
  • Fix when multiple classes provided as property to space to prevent a duplication of class names on the outer and inner space elements. (issue / pull request)


  • Added touch resize functionality.
  • Remove old docs from demo project.


  • Added <Layer /> component and layer support to allow floating of spaces above each other.


  • Migrated from Webpack to Rollup for building component library
  • Created ES module bundles in /dist/es
  • Fixed window undefined error when rendering spaces via Next.js
  • Created server bundle (/dist/server) for using with Node.js server side apps when utilising SSR, e.g. Next.js and seperated styling from server bundle (/dist/server.css). This is currently experimental.


  • Refactored spaces as functional component using hooks.
  • Fixed className type on <ViewPort /> component.

0.1.11 - 0.1.12

  • Fix to deal with changes to size and anchor properties on anchored spaces and adjusted spaces accordingly.


  • Added 'as' property to allow rendered DOM element to be specified (thanks to u/MahNonAnon and u/trevoreyre on Reddit for suggestion of this).
  • Added 'centerContent' property as short-hand for centering space content instead of having to introduce the extra <Centered /> or <CenteredVertically /> components.
  • Allow resize handle width to be specified and also it's placement within space controlled with the 'overlayHandle' property.
  • Fixed issue with dynamically added/removed anchored spaces where an anchored space would see itself as a space taking space.


  • Added repository field to package.json


  • Removed clear fix from space


  • Fixed positioning of resize handles within scrollable divs


  • Fixed resize minimum and maximum constraints


  • Fixed resize handles being covered by nested spaces preventing resizing


  • Add support for percentage sizing on anchored spaces


  • Added readme
  • Updated documentation


  • Removed ResizeSensor from spaces by default and now optionally allow live size updates with trackSize property
  • Added <VerticallyCentered /> component to vertically centre content within a space
  • Allow class names to be specified on top-level spaces <ViewPort /> and <Fixed />


  • Initial version

Known issues / limitations

  • Rendering an anchored horizontal space and an anchored vertical space within the same parent space will cause a gap to appear in the corner where the two anchored spaces meet. You can workaround this by using nested <Fill /> spaces to seperate the horizontally and vertically anchored spaces.
  • There isn't currently any consideration for using spaces in a responsive manner. You can however give spaces class names and target them with media queries like you would with any other DOM element.