@yozora/react-footnote-definitions

This component is for rendering the Footnotes data produced by @yozora/tokenizer-footnote-definitions.
This component has been built into @yozora/react-markdown, you can use it directly.

Install

• npm

  npm install --save @yozora/react-footnote-definitions

• yarn

  yarn add @yozora/react-footnote-definitions

Usage

• Basic:

  import React from 'react'
  import Footnotes from '@yozora/react-footnote-definitions'
  import '@yozora/react-footnote-definitions/lib/esm/index.css'
  
  const wrapper = (
    <Footnotes keyword="info" style={{ color: 'orange', fontSize: '16px' }}>
      some text1
      <span>some text2</span>
    </Footnotes>
  )

Props

Name	Type	Required	Default	Description
nodes	FootnoteItem[]	true	-	Footnote definition items.
className	string	false	-	Root css class
style	React.CSSProperties	false	-	Root css style

• nodes: FootnoteItem[]

  export interface FootnoteItem {
    /**
     * Footnote reference label
     */
    label: string
    /**
     * Footnote reference identifier. 
     *
     * The prefix `reference-` will be added automatically.
     */
    identifier: string
    /**
     * Toc title
     */
    children: React.ReactNode
  }

• className: The root element of this component will always bind with the CSS class 'yozora-footnote-definitions'

Related

• @yozora/ast
• @yozora/react-footnote-reference
• @yozora/react-markdown
• @yozora/tokenizer-footnote
• @yozora/tokenizer-footnote-definition
• @yozora/tokenizer-footnote-reference
• footnoteDefinition | Mdast]