diff --git a/README.md b/README.md index 2ac95d40..c630de3c 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,67 @@ export const App = () => ( ); ``` -### Styling +If you want more control over the behaviour of the individual panes you can use the `Allotment.Pane` component. This includes setting the minimum and maximum size of a pane, as well as whether to enable snapping behaviour. + +```jsx + + + + + + + + +``` + +## Allotment props + +### defaultSizes + +An array of initial sizes of the panes. If the sum of the sizes differs from the size of the container then the panes' sizes will be scaled proportionally. + +```jsx + +
+
+ +``` + +### maxSize (default: `Infinity`) + +Maximum size of any pane. + +### minSize (default: `30`) + +Minimum size of any pane. + +### snap + +Enable snap to zero for all panes. + +### vertical (default: `false`) + +Direction to split. If true then the panes will be stacked vertically, otherwise they will be stacked horizontally. + +### onChange + +Callback that is fired when the pane sizes change (usually on drag). Recommended to add a debounce function to rate limit the callback. + +## Allotment.Pane props + +### maxSize + +Maximum size of this pane. Overrides `maxSize` set on parent component. + +### minSize + +Minimum size of this pane. Overrides `minSize` set on parent component. + +### snap + +Enable snap to zero for this pane. Overrides `snap` set on parent component. + +## Styling Allotment uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for styling. You can customize the following default variables. diff --git a/src/allotment.tsx b/src/allotment.tsx index 844e4af0..5507cc5f 100644 --- a/src/allotment.tsx +++ b/src/allotment.tsx @@ -46,7 +46,14 @@ export type AllotmentHandle = { reset: () => void }; export type AllotmentProps = { children: React.ReactNode; - /** Initial size of each element */ + /** + * Initial size of each element + */ + defaultSizes?: number[]; + /** + * Initial size of each element + * @deprecated Use {@link AllotmentProps.defaultSizes defaultSizes} instead + */ sizes?: number[]; /** Direction to split */ vertical?: boolean; @@ -61,6 +68,7 @@ const Allotment = forwardRef( maxSize = Infinity, minSize = 30, sizes, + defaultSizes = sizes, snap = false, vertical = false, onChange, @@ -73,6 +81,12 @@ const Allotment = forwardRef( const splitViewRef = useRef(null); const splitViewViewRef = useRef(new Map()); + if (process.env.NODE_ENV !== "production" && sizes) { + console.warn( + `Prop sizes is deprecated. Please use defaultSizes instead.` + ); + } + const childrenArray = useMemo( () => React.Children.toArray(children).filter(React.isValidElement), [children] diff --git a/stories/allotment.stories.tsx b/stories/allotment.stories.tsx index 5f115b84..0aa15748 100644 --- a/stories/allotment.stories.tsx +++ b/stories/allotment.stories.tsx @@ -90,7 +90,11 @@ export const PersistSizes: Story<{ numViews: number; vertical: boolean }> = ({ return (
{hasReadFromLocalStorage && ( - + {views.map((view) => (
{view.id}