`typescript
import { Container } from 'react-simple-resizer';
`

#### Props
`typescript
import { HTMLAttributes } from 'react';

interface ContainerProps extends HTMLAttributes {
vertical?: boolean;
onActivate?: () => void;
beforeApplyResizer?: (resizer: Resizer) => void;
afterResizing?: () => void;
}
`

##### vertical

Determine whether using vertical layout or not, default is false.

##### onActivate

Triggered when any Bar is activated. i.e, onMouseDown or onTouchStart.

##### beforeApplyResizer

Used to customize resize behavior. In this method, you __don't__ need to call applyResizer to apply the resize result. Please note that you should not do any side effect on this method. If you want to do something after resizing, see afterResizing below.

##### afterResizing

Triggered after a __resizing section__ is completed, which means that it will be triggered after onMouseUp and onTouchEnd events. If you want to do something after size of section has changed, use onSizeChanged props on the Section instead.

#### Instance properties
`typescript
import React from 'react';

class Container extends React.PureComponent {
public getResizer(): Resizer
public applyResizer(resizer: Resizer): void
}
`
##### getResizer
Used to get newest Resizer. But any change won't apply unless you pass the Resizer to applyResizer.

##### applyResizer
Apply the passed Resizer to Container.

---


$3

`typescript
import { Section } from 'react-simple-resizer';
`

#### Props
`typescript
import { HTMLAttributes, RefObject } from 'react';

interface SectionProps extends HTMLAttributes {
size?: number;
defaultSize?: number;
maxSize?: number;
minSize?: number;
disableResponsive?: boolean;
onSizeChanged?: (currentSize: number) => void;
innerRef?: RefObject;
}
`
##### size
Used to set Section's size. If size is set, Section will ignore the value of defaultSize, maxSize and minSize.

##### defaultSize
Used to set default size of Section.

##### maxSize
Used to set max size of Section.

##### minSize
Used to set min size of Section.

##### disableResponsive
Each Section is responsive as default, unless size exists. The responsive here means that Section's size is related with Container's size, if Container's size turn smaller, the Section's size also turn smaller automatically. Otherwise, changes of Container size won't affect the Section when disableResponsive is true.

##### onSizeChanged
Will be triggered each time its size has changed.

##### innerRef
Used to get the actual DOM ref of Section.

---


$3

`typescript
import { Bar } from 'react-simple-resizer';
`

#### Props
`typescript
import { HTMLAttributes, RefObject } from 'react';

interface ExpandInteractiveArea {
top?: number;
left?: number;
right?: number;
bottom?: number;
}

interface BarProps extends HTMLAttributes {
size: number;
expandInteractiveArea?: ExpandInteractiveArea;
onStatusChanged?: (isActive: boolean) => void;
onClick?: () => void;
innerRef?: RefObject;
}
`
##### size
Required, used to set the size of Bar.

##### expandInteractiveArea
Used to expand interactive area of Bar.

##### onStatusChanged
Triggered when the state of Bar has changed.

##### onClick
Triggered if there's no "move" events. The main difference between it and original onClick event is that __there is no parameters__ on _this_ onClick. You could also use it as a touch event on mobile platform, without 300ms click delay.

##### innerRef
Used to get the actual DOM ref of Bar.

Customize resize behavior

There is two ways to get the Resizer. One is beforeApplyResizer defined on the __props__ of Container, and the other is getResizer defined on the __instance__ of Container.

Beware that you need __manually__ calling applyResizer every time you want to apply the effect, except in beforeApplyResizer. Check demo Make Section collapsible to see how applyResizer is used.

`typescript
interface Resizer {
resizeSection: (indexOfSection: number, config: { toSize: number; preferMoveLeftBar?: boolean }) => void;
moveBar: (indexOfBar: number, config: { withOffset: number; }) => void;
discard: () => void;
isSectionResized: (indexOfSection: number) => boolean;
isBarActivated: (indexOfBar: number) => boolean;
getSectionSize: (indexOfSection: number) => number | -1;
getTotalSize: () => number;
}
`

##### resizeSection
Used to set size of the nth Section.
In multi-column layout, there're several Bars could change the Section's size. Therefore, you could try to use the left side Bar to resizing by setting preferMoveLeftBar.

##### moveBar
Used to move the nth Bar to resizing.
If the value of A is negative, move Bar to the left. When vertical is true, move up.

##### discard
Discard resizing at this time.

##### isSectionResized
Used to determine whether the nth Section's size is changed at current resizing section or not.

##### isBarActivated
Used to determine whether the nth Bar is active or not.

##### getSectionSize
Used to get size of the nth Section. if there is no nth Section, return -1.

##### getTotalSize
Used to get total size of all Section`.

Contributing

#### About Demo
Feel free to let us know that you have created some new customized resize behavior. You could create a PR to let more people see your works. Also, if you find some behaviors that you cannot create, let us know too.