The Root component serves as the main container for all other Suchi components, providing a context (SuchiContext) for them.

It tracks all sections and references, using this information to generate the index and the list of references.

Props

accentColor

The Root component accepts an accentColor prop, which is used to highlight the active Indicator and active Item.

For more information on how to style your Suchi Index, refer to the Styling Guide.

observerControls and scrollBehaviorControls

You can controls the behavior of the Intersection Observer using the observerControls and the Scroll Behavior using the scrollBehaviorControls

For example:

// These are the default scroll behavior controls
const defaultScrollBehaviorControls = {
  behavior: "smooth" as ScrollBehavior,
  block: "start" as ScrollLogicalPosition,
};
 
// In case you want to scroll instantly
// and the section to appear at the center,
// you can alter the controls using the scrollBehaviorControls
 
<Suchi.Root
  scrollBehaviorControls={{ behavior: "instant", block: "center" }}
  ...
/>

toggleWidth

You can use the toggleWidth property to dynamically switch between rendering the DesktopIndex and the MobileIndex components based on the screen size.

By default, the value of toggleWidth is set to 768px. Here's how it works:

• If the screen size is less than 768px, the MobileIndex component will be displayed.
• If the screen size is 768px or greater, the DesktopIndex component will be displayed. This allows you to provide a responsive experience by adapting the rendered component based on the user's screen size.

toggleWidth = 400px

Mobile Index

0px

IntroductionGetting StartedAdvanced TechniquesBest PracticesConclusion

Mastering React Hooks

Introduction

Getting Started

Advanced Techniques

Best Practices

Conclusion

This demo unfortunately requires a larger screen width.

Sample Usage

<Suchi.Root
  accentColor="orangered"
  className="article_wrapper my-8"
  style={{ padding: "16px" }} 

>
  <Suchi.Index />
  <Suchi.Header />
  <Suchi.Section>
    <Suchi.SectionHeader />
    <Suchi.Content>
      <Suchi.Reference />
    </Suchi.Content>
  </Suchi.Section>
</Suchi.Root>