24 lines
976 B
TypeScript
24 lines
976 B
TypeScript
import { useState, useEffect } from 'react'
|
|
|
|
export default function useLazyLoadHighlightJS(path: string) {
|
|
// If the page contains `[data-highlight]` blocks, these pages need
|
|
// syntax highlighting. But not every page needs i t, so it's conditionally
|
|
// lazy-loaded on the client.
|
|
const [lazyLoadHighlightJS, setLazyLoadHighlightJS] = useState(false)
|
|
useEffect(() => {
|
|
// It doesn't need to use querySelector because all we care about is if
|
|
// there is greater than zero of these in the DOM.
|
|
// Note! This "core selector", which determines whether to bother
|
|
// or not, needs to match what's used inside ClientSideHighlightJS.tsx
|
|
if (document.querySelector('[data-highlight]')) {
|
|
setLazyLoadHighlightJS(true)
|
|
}
|
|
|
|
// Important to depend on the current path because the first page you
|
|
// load, before any client-side navigation, might not need it, but the
|
|
// consecutive one does.
|
|
}, [path])
|
|
|
|
return lazyLoadHighlightJS
|
|
}
|