Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 129x 129x 129x 129x 1234x 129x 103x 129x 10097x 129x 129x 129x 10097x 10097x 10097x 129x 10097x 10097x 1234x 103x 10097x | import React, { createContext, useContext, useRef } from 'react';
type ViewportRefsContextType = {
registerViewport: (viewportId: string, element: HTMLElement) => void;
unregisterViewport: (viewportId: string) => void;
getViewportElement: (viewportId: string) => HTMLElement | null;
viewportRefs: Map<string, HTMLElement>;
};
// comment
const ViewportRefsContext = createContext<ViewportRefsContextType | undefined>(undefined);
export const ViewportRefsProvider = ({ children }: { children: React.ReactNode }) => {
const viewportRefsRef = useRef<Map<string, HTMLElement>>(new Map());
const registerViewport = (viewportId: string, element: HTMLElement) => {
viewportRefsRef.current.set(viewportId, element);
};
const unregisterViewport = (viewportId: string) => {
viewportRefsRef.current.delete(viewportId);
};
const getViewportElement = (viewportId: string): HTMLElement | null => {
return viewportRefsRef.current.get(viewportId) || null;
};
const contextValue: ViewportRefsContextType = {
registerViewport,
unregisterViewport,
getViewportElement,
viewportRefs: viewportRefsRef.current,
};
return React.createElement(ViewportRefsContext.Provider, { value: contextValue }, children);
};
export const useViewportRefs = () => {
const context = useContext(ViewportRefsContext);
Iif (context === undefined) {
throw new Error('useViewportRefs must be used within a ViewportRefsProvider');
}
return context;
};
export const useViewportRef = (viewportId: string) => {
const { registerViewport, unregisterViewport, getViewportElement } = useViewportRefs();
const ref = {
current: getViewportElement(viewportId),
register: (element: HTMLElement) => registerViewport(viewportId, element),
unregister: () => unregisterViewport(viewportId),
};
return ref;
};
|