#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.6

- useEvent - Removed useLayoutEffect handling.

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

$3

- useAdvancedPopup
- useSelectSearch
- useIntersectionObserver

$3

- useGlobalEscape
- EscapeContext
- EscapeProvider
- ResizeObserverProvider
- useVisibleOnPage

$3

- 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