useSuchi()

Suchi provides simple APIs to access SuchiContext values, making it easy to create a custom Table of Contents that leverages Suchi's automatic composition.

You must use useSuchi within the Suchi.Root scope to access useSuchi values

Sections and ActiveSection

sections is an array of all the Section created inside the Root.

activeSection holds the title of the current Section in the view.

page.tsx

// Add your custom styles, layout for the Index
const CustomIndex = () => {
  const { sections, activeSection } = useSuchi();
  const handleClick = (sectionRef: any) => {
    sectionRef?.current.scrollIntoView({
      behavior: "smooth",
      block: "center",
    });
  };
 
  return (
    <div>
      {sections.map((s, i) => (
        <button
          key={i}
          onClick={() => handleClick(s.ref)}
          className={`${
            s.title === activeSection ? "activeItem" : "inactiveItem"
          }`}
        >
          {s.title}
        </button>
      ))}
    </div>
  );
};

Scrolling

When navigating to a section using the Index Item, Suchi maintains a scrolling state to temporarily defer the IntersectionObserver during the scroll.

References

references is an array of all the References created inside the Root.

page.tsx

// Add your custom styles, layout for the Index
const { references } = useSuchi();
 
console.log(references);
/*
[
  {
    "id": "ref-quantization-aware-factorization-for-deep-neural-network-compression",
    "link": "https://www.jair.org/index.php/jair/article/view/16167",
    "index": 0,
    "target": "_blank"
  }
]
*/

useSuchi()

Sections and ActiveSection

Scrolling

References

On this page