https://github.com/moimikey/react-footnotes

👣 dead simple footnotes, in React
https://github.com/moimikey/react-footnotes

footnote footnotes react react-components

Last synced: about 2 months ago
JSON representation

👣 dead simple footnotes, in React

• Host: GitHub
• URL: https://github.com/moimikey/react-footnotes
• Owner: moimikey
• Created: 2018-08-23T23:38:18.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2023-11-02T22:20:09.000Z (about 1 year ago)
• Last Synced: 2024-08-10T05:03:52.194Z (5 months ago)
• Topics: footnote, footnotes, react, react-components
• Language: JavaScript
• Homepage:
• Size: 434 KB
• Stars: 5
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 👣 react-footnotes

dead simple footnotes, in React



## Installation

```sh

npm install --save react-footnotes

yarn add react-footnotes

```

```js

// esmodules

import { Footnotes } from 'react-footnotes'

// commonjs

var Footnotes = require('react-footnotes').Footnotes

```

## Usage

Pass any props you want to read from `getFootnotes`, to `Footnote`.

```jsx

import * as React from 'react'

import { Footnotes } from 'react-footnotes'

class App extends React.Component {

  render() {

    return (

      

        {({ Footnote, getFootnotes }) => (

          

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Text that doesnt need to be footnoted, can be passed as normal text.

            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

            


              {Object.keys(getFootnotes()).map(i => {

                return (

                  
{getFootnotes()[i].desc}

                )

              })}

            

          

        )}

      

    )

  }

}

```


## TODO

- [ ] automatically generate the index number so it doesn't have to be passed manually...

## Development

```sh

npm run dev

# go to http://localhost:1234

```

### Distribution

```sh

npm run build

```