Waffles
© 2021 DataCamp, Inc.

components

Resizable Elements

A way to provide resizing.

Overview

This component allows for multiple elements to be resized by the user.

Live

Props

ResizableElements

NameValueDefaultDescription
childrenReactReactNodeRequiredThe elements to make "resizable". They will each be rendered inside a div that can change in size.
collapsedSizenumber30The size of a "collapsed" element in pixels.
initialProportionsnumberAn array of percentage values. This should be the same length as the number of elements. This determines the initial sizes of the elements. When not provided the elements will default to equal sizes.
orientation'row' | 'column''row'The layout of the child elements.

Imports

You can import following components or utilities from this module:

import ResizableElements, { CollapseContext } from '@datacamp/waffles-resizable-elements';