@zohodesk/hooks

#UNIFIED COMPONENTS LIBRARY - Hooks

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

• useAccordion
• useAccordionHeight
• 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.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

// 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.

// 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.

// 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.

// 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

// Before
useClickOutside({
    element: elementRef,
    callback: () => {}
});

// After
useClickOutside({
    getElements: () => [element1_Ref, element2_Ref],
    callback: () => {},
    isRegister: true
});

• useScrollStopper arguments has been updated.

// 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.

// Before
const [elementRef, matchedQuery] = useContainerQuery(query, options);

// After
const matchedQuery = useContainerQuery(() => elementRef, query, options);

• useResizeObserver arguments is updated

// Before
useResizeObserver({
    element: elementRef
    callback: () => {}
});

// After
useResizeObserver({
    getElement: () => elementRef,
    callback: () => {},
    isObserve: true
});

• useWindowResize - Removed the resize handler from useEffect dependency