react#RefCallback TypeScript Examples
The following examples show how to use
react#RefCallback.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx From oasis-wallet-web with Apache License 2.0 | 6 votes |
function useRefWithCallback<T>(onMount: (el: T) => void, onUnmount: (el: T) => void): RefCallback<T> {
const nodeRef = useRef<T | null>(null)
const setRef = useCallback(
(node: T) => {
if (nodeRef.current) {
onUnmount(nodeRef.current)
}
nodeRef.current = node
if (nodeRef.current) {
onMount(nodeRef.current)
}
},
[onMount, onUnmount],
)
return setRef
}
Example #2
Source File: index.tsx From g2plot-react with MIT License | 6 votes |
syncRef = <C extends Options>(
source: MutableRefObject<BasePlot<C> | null>,
target?:
| RefCallback<BasePlot<C> | null>
| MutableRefObject<BasePlot<C> | null>
) => {
/* istanbul ignore else */
if (typeof target === 'function') {
target(source.current)
} else if (target) {
target.current = source.current
}
}
Example #3
Source File: index.tsx From slice-machine with Apache License 2.0 | 6 votes |
function useSimulatorClient(): readonly [
SimulatorClient | undefined,
RefCallback<HTMLIFrameElement>
] {
const [client, setClient] = useState<SimulatorClient | undefined>();
const clientRef = useRef<SimulatorClient>();
const observerRef = useRef<MutationObserver>();
const iframeRef = useCallback(async (element: HTMLIFrameElement | null) => {
clientRef.current?.disconnect();
observerRef.current?.disconnect();
setClient(undefined);
if (element != null) {
clientRef.current = new SimulatorClient(element);
try {
await clientRef.current.connect();
setClient(clientRef.current);
const reconnect = async () => {
setClient(undefined);
await clientRef.current?.connect(true);
setClient(clientRef.current);
};
observerRef.current = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === "src") {
reconnect().catch((error) => {
throw error;
});
}
});
});
observerRef.current.observe(element, { attributeFilter: ["src"] });
} catch (e) {
console.error(e);
}
}
}, []);
return [client, iframeRef];
}
Example #4
Source File: useForkRef.ts From docs-components with MIT License | 6 votes |
function setRef<T>(
value: T | null,
ref?: MutableRefObject<T | null> | RefCallback<T | null> | null,
): void {
if (typeof ref === 'function') {
ref(value);
} else if (ref) {
ref.current = value;
}
}
Example #5
Source File: ListViewport.tsx From flood with GNU General Public License v3.0 | 5 votes |
Overflow = forwardRef<HTMLDivElement, ComponentProps<'div'>>((props: ComponentProps<'div'>, ref) => {
const {children, className, onScroll} = props;
const osRef = useRef<OverlayScrollbarsComponent>(null);
useEffect(() => {
const scrollbarRef = osRef.current;
if (scrollbarRef == null) {
return () => {
// do nothing.
};
}
const viewport = scrollbarRef.osInstance()?.getElements().viewport as HTMLDivElement;
const refCallback = ref as RefCallback<HTMLDivElement>;
refCallback(viewport);
if (onScroll) {
viewport.addEventListener('scroll', (e) => onScroll(e as unknown as UIEvent<HTMLDivElement>), {
passive: true,
});
}
return () => {
if (onScroll) {
viewport.removeEventListener('scroll', (e) => onScroll(e as unknown as UIEvent<HTMLDivElement>));
}
};
}, [onScroll, ref]);
return (
<OverlayScrollbarsComponent
{...props}
options={{
scrollbars: {autoHide: 'leave', clickScrolling: true},
className,
}}
ref={osRef}
>
{children}
</OverlayScrollbarsComponent>
);
})