# react-markdown-remark-directive

> Adds the remark-directive to react-markdown

Latest version **1.1.1** (published 2021-04-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-markdown-remark-directive
pnpm add react-markdown-remark-directive
yarn add react-markdown-remark-directive
bun add react-markdown-remark-directive
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-04-29 |
| First published | 2021-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 4.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Robert Antoine |
| Maintainers | rjantoine |
| Keywords | plugin, markdown, react, directive |

## Links

- npm: https://www.npmjs.com/package/react-markdown-remark-directive
- Repository: https://github.com/rjantoine/react-markdown-remark-directive
- Homepage: https://github.com/rjantoine/react-markdown-remark-directive#readme
- Issues: https://github.com/rjantoine/react-markdown-remark-directive/issues
- npm.io page: https://npm.io/package/react-markdown-remark-directive

## Dependencies (2)

- [remark-directive](https://npm.io/package/remark-directive.md) ^1.0.1
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2021-04-29
- 1.1.0 — 2021-04-11
- 1.0.1 — 2021-04-09
- 1.0.0 — 2021-04-09

## README

# React Markdown Remark Directive

This is a plugin for react-markdown.

It uses the directive format to easily add custom functionality into your markdown via remark-directive.

If the tag is one of the included components, it will render the element

To use, simply add incluced plugin and render when calling ReactMarkdown

```jsx
import ReactMarkdown from 'react-markdown'
import rmDirective from '../react-markdown-remark-directive'

// Object of custom Markdown components
const components = {}

// Array of ReactMarkdown plugins
const rmPlugins = [
    // ... other plugins for ReactMarkdown
    [rmDirective, {components}],
]

// Expected result:
// <tag foo="bar" foofoo="barbar">value</tag>
const markdownCode = ":tag[value]{foo=bar foofoo=barbar}"
    <ReactMarkdown plugins={rmPlugins} source={markdownCode} />
```

## Valid React

```jsx
// include above code

const Welcome = (attr) => {
    console.log(attr)
    return (
        <>
            {attr.greeting} to you {attr.name}, {attr.value}!
        </>
    )
}
Object.assign(components, Welcome) // Or add it in the original object


const markdownCode = "::Welcome[nice to meet you]{greeting=Hello name=Rob}"
    <ReactMarkdown plugins={rmPlugins} source={markdownCode} />
```

Generated React
```jsx
<Welcome greeting="Hello" name="Rob">nice to meet you</Welcome>
```

Rendered Html
```
Hello to you Rob, nice to meet you!
```

## Invalid React

If a valid React component was not included, it will simply render it as valid Html

```jsx
// include above code

const markdownCode = ":tag[value]{attr1=val1 attr2=val2}"
    <ReactMarkdown plugins={rmPlugins} source={markdownCode} />
```

Generated Html


```html
<tag attr1="val1" attr2="val2">value</tag>
```

Rendered Html
```
value
```

## Updates
v1.1.0 Adds ability to render the children.

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