Exploring Design Interfaces

leetcode

github

Harsh Sharma  • Peerlist

<p></p><h3>Suchi</h3><p>सूची /sūcī/ - a list of things</p><h2><strong>Overview</strong></h2><p>An open source React library to create an Index (Table of Contents) for your page.</p><p></p><p>I have always enjoyed blogs or articles which have a proper index system or trable of contents to give a quick overview of the contents of the page. Besides giving a quick overview, its convenient to use the index to skip over to a section of the page quickly. </p><p></p><p>So, I came up with Suchi, an easy way to create a fully accessible Index. Suchi is just 67kB unpacked and easy to use. </p><h3>Usage</h3><p>Import Suchi from npm from your CLI</p><p>npm i Suchi</p><h3>Usage</h3><p>Import Suchi from npm from your CLI</p><p>import Suchi from "suchi"

&lt;Suchi.Root accentColor&gt;
  &lt;Suchi.Header/&gt;
  
  &lt;Suchi.Section&gt;
    &lt;Suchi.SectionHeader/&gt;
    &lt;Suchi.Content/&gt;
  &lt;/Suchi.Section&gt;
&lt;/Suchi.Root&gt;
</p><p></p><p>Suchi automatically creates Index from the SectionHeaders and creates an Index table for both desktop and mobile views out of the box. </p><p></p><p>See the API reference at <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-500 rich-link break-all link-break" href="https://suchidocs.in/">https://suchidocs.in/</a></p><h3>Open Source</h3><p>Suchi is a open source project and you can contribute to Suchi by following our <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-500 rich-link break-all link-break" href="https://github.com/harsh-1923/suchi/blob/main/CONTRIBUTING.md">Contributing Guidelines</a> or by <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-500 rich-link break-all link-break" href="https://github.com/harsh-1923/suchi/issues">Reporting a Bug</a></p><p></p>