@zohodesk/hooks/README.md

Unified Component Library - Hooks

# #UNIFIED COMPONENTS LIBRARY - Hooks

In this package, We provide below react hooks for components development.

- useAccordion
- useAccordionHeight
- useAdaptiveRenderer
- useAvatar
- useDateTime
- useCalendar
- useTime
- useEventListener
- useFileUpload
- useFloating
- useMediaViewer
- useModal
- useMultiselect
- useMultiselectCategory
- useNotificationBadge
- usePagination
- usePopup
- useAdvancedPopup
- useRadio
- useSelect
- useSelectSearch
- useSelectControl
- useSwitch
- useSelectTab
- useTextArea
- useTextBox
- useClickOutside
- useCommonReducer
- useContainerQuery
- useEffectCallOnlyAfterState
- useElementResize
- useEscape
- useEscapeEffect
- useEvent
- useId
- useMediaQuery
- useMergeState
- useMergeStyle
- usePrevious
- useIntersectionObserver
- useResizeObserver
- useScrollEnd
- useScrollParents
- useScrollStopper
- useTimeout
- useWindowResize

# 2.0.5

- `useAdaptiveRenderer` - New hook added

# 2.0.4

- `useEventListener` - New hook added

# 2.0.3

- `useMergeState` - New hook added

# 2.0.2

- `useEffectCallOnlyAfterState` - Cleanup option provided as third argument
- `useIntersectionObserver` - Changing isStartIntersecting will reinitiate the observer
- `useIntersectionObserverGroup` - New hook added

# 2.0.1

- `useResizeObserver` issue fix
- `useList` deprecated
- `useMultiselectCatogory` arguments and return values has been updated
```js
// Before
const { selectedValues, searchStr, ...otherData } = useMultiselectCatogory({
    options: [],
    selectedValues: [],
    selectedGroup: ''
});

// After
const { selectedOptions, searchString, ...otherData } = useMultiselectCatogory({
    options: [],
    selectedOptions: [],
    selectedGroup: ''
});
```
- `useFileUpload` **"getRef"** argument removed. handleFocus method added.
- `useElementResize` will not return **"width"**. Introduced **"resizeType"** and **"needContainerSizeChange"** props.
```js
// Before
const { setContainerRef, setBarRef, width } = useElementResize({
    minWidth: 300,
    handleResizeCallback: () => {}
});

// After
const { setContainerRef, setBarRef } = useElementResize({
    minHeight: 100,
    maxHeight: 500,
    minWidth: 100,
    maxWidth: 500,
    resizeType: 'both' || 'height' || 'width',
    handleResizeCallback: () => {},
    needContainerSizeChange: true || false
});
```

# 2.0.0

### Newly Introduced

- useAdvancedPopup
- useSelectSearch
- useIntersectionObserver

### Removed

- useGlobalEscape
- EscapeContext
- EscapeProvider
- ResizeObserverProvider
- useVisibleOnPage

### Updated

- `useEscape` arguments structure has been updated. And No provider is needed to use the escape functionalities with the order.
```js
// Before
useEscape(callback, isRegister);

// After
useEscape({
    callback: () => {},
    isRegister: true
});
```
- `useFloating` arguments is updated. Now you have to give a function which should return element ref.
- `useFloating` return value is also updated. Now, this returns a function that will returns the popup position related data.
```js
// Before
const { ...floatingData, handlePosition } = useFloating(containerEleRef, floatingEleRef, options);

// After
const getFloating = useFloating(() => containerEleRef, () => floatingEleRef, options);

const { view, views, viewsOffset, targetOffset, popupOffset, relativeOffset, relativePosition, popupPosition } = getFloating();
```
- `useClickOutside` arguments structure has been updated
```js
// Before
useClickOutside({
    element: elementRef,
    callback: () => {}
});

// After
useClickOutside({
    getElements: () => [element1_Ref, element2_Ref],
    callback: () => {},
    isRegister: true
});
```
- `useScrollStopper` arguments has been updated.
```js
// Before
useScrollStopper({
    element: elementRef,
    excludeElement: excludeElementRef,
    isStop: false
});

// After
useScrollStopper({
    element: elementRef,
    getExcludeElements: () => [excludeElement1_Ref, excludeElement2_Ref],
    isStop: false
});
```
- `useContainerQuery` arguments is updated. Now you have to give a function which should return element ref.
- `useContainerQuery` return value is also updated. Now, this returns only the matched query object.
```js
// Before
const [elementRef, matchedQuery] = useContainerQuery(query, options);

// After
const matchedQuery = useContainerQuery(() => elementRef, query, options);
```
- `useResizeObserver` arguments is updated
```js
// Before
useResizeObserver({
    element: elementRef
    callback: () => {}
});

// After
useResizeObserver({
    getElement: () => elementRef,
    callback: () => {},
    isObserve: true
});
```
- `useWindowResize` - Removed the resize handler from useEffect dependency