@leafvein/catalogue
TypeScript icon, indicating that this package has built-in type declarations

0.6.7 • Public • Published

Catalogue

Generate a catalogue from your website content 📑

npm version

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 Version
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 -

License

MIT

Package Sidebar

Install

npm i @leafvein/catalogue

Weekly Downloads

37

Version

0.6.7

License

MIT

Unpacked Size

26.3 kB

Total Files

15

Last publish

Collaborators

  • zealleaf