@yozora/react-footnote-definitions NPM

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
}