@zohodesk/hooks
v2.0.5
Published
Unified Component Library - Hooks
Downloads
1,931
Maintainers
Readme
#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 argumentuseIntersectionObserver
- Changing isStartIntersecting will reinitiate the observeruseIntersectionObserverGroup
- New hook added
2.0.1
useResizeObserver
issue fixuseList
deprecateduseMultiselectCatogory
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