Documentation
Migration Guide

Migration Guide

The migration process should be hassle-free for users upgrading from Stacks v2 to v3. However, you should be aware of some notable changes.

⚠️

Stacks is now published in the @grapp scope. So, you need to fix the imports first. Don't worry, it's a quick fix! @mobily/stacks → @grapp/stacks

General

The Stacks library has been completely rewritten in TypeScript, so it no longer supports ReScript. The flex gap values now define spaces between components (excluding Columns, see this (opens in a new tab)).

Components

Provider

Stacks now uses Unistyles, which means that you can remove StacksProvider from the React component tree and provide configuration values to the Unistyles theme object, as described here.

Box

Several new props have been added to the Box component, including width, height, gap, rowGap, columnGap, backgroundColor, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, borderColor, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, and debuggable.

Columns

The defaultWidth prop is now defaultFlex, and the width prop has been changed to flex. Use Column.from to create a custom Column component. The markAsColumn function has been removed.

FillView

FillView has been renamed to FloatBox. The unset helper has been removed, and the positioning has been fixed if you don't provide all offset values.

Hidden

Experimental support for hiding elements by transforming the React component tree with the provided Babel plugin has been added.

Inline

The spaceX and spaceY props have been added.

Rows

The defaultHeight prop is now defaultFlex, and the height prop has been changed to flex. Use Row.from to create a custom Row component. The markAsRow function has been removed.

Tiles

The spaceX and spaceY props have been added, and empty has been renamed to fill.

Hooks

  • useStacks has been removed, as StacksProvider is no longer needed.
  • useCurrentBreakpoint has been removed. To get the current breakpoint name, you can use useStyles from Unistyles.
  • useSpacing has been removed. To achieve the same result, you can use useSpacingHelpers and multiply.
  • useWindowDimensions has been removed. You can now get the screen dimensions with UnistylesRuntime.screen.

That's all folks!

UsageComponents