# remark-heading-anchor

> ```js npm i remark-heading-anchor ```

Latest version **0.0.5** (published 2022-04-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install remark-heading-anchor
pnpm add remark-heading-anchor
yarn add remark-heading-anchor
bun add remark-heading-anchor
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2022-04-05 |
| First published | 2022-04-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lianfb |
| Keywords | remark plugin, anchor point, heading anchor, react MarkDown |

## Links

- npm: https://www.npmjs.com/package/remark-heading-anchor
- Repository: https://github.com/yanquanfahei/remark-heading-anchor
- Homepage: https://github.com/yanquanfahei/remark-heading-anchor#readme
- Issues: https://github.com/yanquanfahei/remark-heading-anchor/issues
- npm.io page: https://npm.io/package/remark-heading-anchor

## Dependencies (3)

- [remark](https://npm.io/package/remark.md) ^14.0.2
- [unified](https://npm.io/package/unified.md) ^10.1.2
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^4.1.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.0.5 (latest) — 2022-04-05
- 0.0.4 — 2022-04-05
- 0.0.3 — 2022-04-05
- 0.0.2 — 2022-04-04
- 0.0.1 — 2022-04-04

## README

# Install

```js
npm i remark-heading-anchor
```

## Examples

``` jsx
import { remark } from "remark"
import remarkHeadingAnchor from "remark-heading-anchor"
import ReactMarkdown from 'react-markdown'

async function main() {
  const file = await remark()
  .use(remarkHeadingAnchor, {
    idPrefix: 'heading-'  
  })
  .process('# title')

  console.log(file, 'file') // [{title: 'title', level: 1, id: 'heading-0', index: 0}] 
}

main()

const HeadingComponent = ({ index, children }) => {
  return React.createElement(
    `h1`,
    {
      id: `heading-${index}`, // heading-0
    },
    children
  );
};

const App = () => {
  return (
    <ReactMarkdown
      components={{
        h1: HeadingComponent,
      }}
        includeElementIndex // Use with idPrefix
      >
      {/* ...content */}
    </ReactMarkdown>
  )
}

```

---
_Source: https://npm.io/package/remark-heading-anchor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._