React Spaces

View on GitHub NPM version GitHub stars

View on GitHub.

0.4.1 Hotfix for resize operation race condition JAN 07, 2023

  • Fix for race condition in resize operation which allows a mouse/touch move/drag to be processed after a resize operation has already been completed

0.4.0 Experimental SSR support JAN 06, 2023

Functionality added to allow full SSR rendering support.

  • Switched dynamic ID generation for spaces to use useId() hook from React 18
  • Added component to enable functionality. Place a <Space.SSR /> component above any use of spaces to enable
  • Server-side rendered styling of spaces


  • You must be using React 18
  • Order of spaces is important in the JSX/TSX. You should always put <Fill /> spaces last within any parent

0.3.9 Allow render in SSR environment JAN 06, 2023

Initial fix in relation to

Simple fix to allow spaces to render in a SSR environment

  • Check for existence of document before trying to apply styles
  • Added Next.js demo project to repo

This should allow spaces to be used in Next.js without error, however, this is not a full SSR implementation:

  • Allows space content to render from server side
  • Doesn't allow initial styles to be properly rendered server-side, however, client-side style hydration should kick in if .... all spaces are given a unique id prop to ensure consistency between server/client side renders.

0.3.2 Fix exported types NOV 17, 2021

  • Ensure ResizeTouchEvent and Type exported from library

0.3.0 Positioned space functionality and custom resize handles NOV 17, 2021

  • Created <Positioned /> space #60
  • Allow 'as' property to be Polymorphic (to play with libraries like Framer Motion) #89
  • Custom resize handles #97
  • Added allowOverflow property on spaces to allow contents to overflow space boundary
  • Added useCurrentSpace() hook and deprecated <Space.Info />
  • Refactored resize logic and added drag logic to support movable <Positioned /> space
  • Increased test coverage
  • Updated docs
  • Upgraded storybook
  • Upgraded rollup/build packages

0.1.28 Added proptypes as dependency to library DEC 06, 2020

  • Ensure proptypes package added as direct dependency to library so that proptypes is added automatically to downstream projects to ensure correct running of the library

0.1.20 Cleaner markup with less inline styling and miscellaneous bug fixes/optimisations NOV 23, 2019

  • 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.

0.1.18 Added resize events and various bug fixes OCT 20, 2019

  • Added resize start and end events
  • 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.
  • Fix to ensure debounced resize (mouse/touch) events do not fire after mouse up or touch end events have fired.
  • 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.

0.1.17 Added proptypes validation to components + bug fixes OCT 17, 2019

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

0.1.14 Migrated from webpack to rollup for library build AUG 24, 2019

  • 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 separated styling from server bundle (/dist/server.css). This is currently experimental.

0.1.12 Bug fixes for state sync issues AUG 08, 2019

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

0.1.10 Extra space properties and state sync issue fixes AUG 04, 2019

  • Added 'as' property to allow rendered DOM element to be specified.
  • 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.

0.1.2 Added trackSize property and VerticallyCentered component JUL 22, 2019

  • 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 />

0.1.1 JUL 21, 2019

Initial release

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.