Suchi

सूची /sūcī/

a list of things

Overview

An open source React library to create an Index (Table of Contents) for your page.

Installation

Install the component from your command line.
npm i suchi

Anatomy

Import all parts and piece them together.
import Suchi from "suchi"; 


<Suchi.Root accentColor>
  <Suchi.Header></Suchi.Header>
  <Suchi.ReadTime />
  <Suchi.Section>
    <Suchi.SectionHeader/>
    <Suchi.Content>
      <Suchi.Reference/>
    </Suchi.Content>
  </Suchi.Section>
</Suchi.Root>

API Reference

Root

Contains all the component's and the Suchi Context

PropDescription
accentColoractive section indicator
className-
styles-
children-

Reference

Reference links inside Content that are grouped together and listed at the end of the Root

PropDescription
accentColoractive section indicator
linklink to the page
titletitle for the reference (if any)
className-
styles-
children-

Adjustments

On Chrome iOS, the index tray interferes with the app switcher when one scrolls down. To handle this, we increase the bottom padding on the index tray to lift the index items above the appp switcher.

This adjustment is ignored when one scrolls up by clicking on index items.

//handle the interference with the app switcher in Chrome iOS
useEffect(() => {
  if (scrolling) return;
  let lastScrollPosition = 0;
  const handleScroll = () => {
    if (indexTray.current == null) return;
    const currentScrollPosition =
      window.scrollY || document.documentElement.scrollTop;
    if (currentScrollPosition > lastScrollPosition) {
      indexTray.current.style.paddingBottom = "var(--elevated-padding)";
    } else {
      indexTray.current.style.paddingBottom = "var(--normal-padding)";
    }
    lastScrollPosition = currentScrollPosition;
  };


  // ...


  if ( isIOSChrome ) 
    window.addEventListener("scroll", handleScroll);


  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, [scrolling]);

Contributions

Suchi is a open source project and you can contribute to Suchi by following our Contributing Guidelines or by Reporting a Bug
Made by Harsh