@leafvein/catalogue NPM

Catalogue

Generate a catalogue from your website content 📑

Installation

npm i @leafvein/catalogue
# or
pnpm i @leafvein/catalogue

Usage

Example

import React from 'react'
import Catalogue from '@leafvein/catalogue'
import '@leafvein/catalogue/lib/style.css'

const APP: React.FC = () => {
  return (
    <>
      <div className="doc">
        <h1>hello world</h1>
      </div>
      <Catalogue contentMark=".doc" />
    </>
  )
}

export default APP

API

Property	Description	Type	Default
contentMark	Provides a body content selector for the catalog component	string	-
contentLeft	How far is the left side of the custom catalogue from the main content	number	20
isDebounce	Activation mode of the catalogue item when scrolling the screen	boolean	true
delayTime	Rolling event departure frequency	number	50ms
scrollHash	Whether scrolling the page makes the hash value on the URL change with it	boolean	false
scrollBehavior	Click on the Item of the catalogue, the scrolling behavior of the page	'smooth' \| 'auto'	'smooth'
openMoveHorizontally	Whether the catalogue component follows the body content and moves with the screen width	boolean	false
loadingDuration	loading duration before catalogue loads	number	500ms
diyLoadingStyle	Custom loading style like {width: "100px"}	object	true
diyLoadingChildren	Custom loading component	ReactElement	-
diyWrapStyle	Custom Wrap style like {width: "100px"}	object	-
diyItemsStyle	Custom Items style like {width: "100px"}	object	-
diyActiveItemColor	Customize Active Catalogue Item font color like "#000"	string	-
diyActiveItemBorderColor	Customize Active Catalogue Item border color like "#000"	string	-