How it works
Before we get into the Anatomy of Suchi, I recomend going through a few core concepts and naming conventions that I have used for Suchi.
Indicators
On larger screens, Suchi displays indicators that provide visual hints about the number of sections on the page and highlights the currently visible section.
These indicators are similar to the indicators used in products like Notion, which help users navigate through content intuitively.
Mastering React Hooks
Introduction
Getting Started
Advanced Techniques
Best Practices
Conclusion
Index Tray and Items
Each Section in Suchi adds an Index Item. These Items are placed within an Index Tray.
Suchi automatically creates these Index Items from the SectionHeader component. Learn more about SectionHeader here.
Clicking on the Index Items will scroll to the corresponding section.
Mastering React Hooks
Introduction
Introduction
Getting Started
Getting Started
Advanced Techniques
Advanced Techniques
There are two ways in which we render the Index Tray based on the available width. For clarity, we’ll refer to the Index Tray for larger screens as the Desktop Index and the one for smaller screens as the Mobile Index.
By default, if the available screen width exceeds 768px, the Desktop Index is rendered. If the width is 768px or less, the Mobile Index is displayed. However, you can customize this behavior by passing a custom value through the toggleWidth prop to the Root component, replacing the default 768px threshold.
See how to use the toggleWidth prop here.
toggleWidth = 400px
Mobile Index
Mastering React Hooks
Introduction
Getting Started
Advanced Techniques
Best Practices
Conclusion
Desktop Items
On larger screens, the Index tray remains hidden by default.
It becomes visible when the user hovers over the Indicators. Once the cursor moves away, the Index tray automatically collapses.
Mastering React Hooks
Introduction
Getting Started
Advanced Techniques
Best Practices
Conclusion
Mobile Items
On smaller screens, the Index tray is positioned at the bottom of the screen, making it easily accessible at all times.