Files
DefectingCat.github.io/components/post/SlideToc.tsx
DefectingCat 77c01e168d Add new post toc
fix useLayoutEffect warnning
2022-08-11 18:06:26 +08:00

30 lines
601 B
TypeScript

import { useEffect, useState } from 'react';
import tocbot from 'tocbot';
const SlideToc = () => {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
useEffect(() => {
// Waiting the right time.
mounted &&
tocbot.init({
tocSelector: '.toc',
contentSelector: '#post-content',
headingSelector: 'h1, h2, h3',
});
return () => tocbot.destroy();
}, [mounted]);
return (
<>
<div className="flex justify-end">
<div className="toc"></div>
</div>
</>
);
};
export default SlideToc;