Rearkdown

Rearkdown is a react component for using your custom component in markdown files.

Install

npm install rearkdown
# yarn add rearkdown

Usage

import React from "react";
import { Rearkdown } from "rearkdown"; //import rearkdown

import markdownFile from "./markdown-files/markdown.md"; // a markdown file

import CustomComponent from "./components/CustomComponent";
import AnotherComponent from "./components/AnotherComponent";

function App() {
  return (
    <div>
      <Rearkdown
        file={markdownFile}
        components={{ CustomComponent, AnotherComponent }}
      />
    </div>
  );
}

export default App;

Usage in Markdown file

# An h1 header

Paragraphs are separated by a blank line.

<CustomComponent>Hello</CustomComponent>
<AnotherComponent>World</AnotherComponent>

2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists
look like:

- this one
- that one
- the other one

...
...
...

Props

• file^required - a markdown file you imported
• components - An object of components to import your component into markdown file
• overrides - Assign new components to default html tags
• options - Other options which markdown-to-jsx provides. (forceBlock, forceInline etc.)

Full example

Using react-rough-notation as our custom component

App.js

import React from "react";
import "./App.css";

import markdownFile from "./markdown.md";

import { RoughNotation } from "react-rough-notation";
import { Rearkdown } from "rearkdown";

const RoughComponent = ({ type, color, children }) => {
  return (
    <RoughNotation type={type} color={color} show={true}>
      {children}
    </RoughNotation>
  );
};

function App() {
  return (
    <div className="App">
      <Rearkdown file={markdownFile} components={{ RoughComponent }} />
    </div>
  );
}

export default App;

markdown.md

# An h1 header

Paragraphs are separated by a blank line.

<RoughComponent type="strike-through" color="#ff0000">Hello</RoughComponent>
<RoughComponent type="underline">World</RoughComponent>

2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists
look like:

- this one
- that one
- the other one

Example screenshot

Components

You can add your custom components to use in markdown file.

components={{ MyComponent, AnotherComponent }}

<Rearkdown
  file={markdownFile}
  components={{ CustomComponent, AnotherComponent }}
/>

Also you can set new name to your components

components={{ "HelloWorld": MyComponent, AnotherComponent }}

Now your MyComponent will be used as <HelloWorld> in markdown file.

Overrides

You can change default HTML tags with a component.

overrides={{ h1: MyH1Component, p: MyParagraph }}

<Rearkdown
  file={markdownFile}
  components={{ CustomComponent, AnotherComponent }}
  overrides={{ h1: MyH1Component, p: MyParagraph }}
/>

Options

You can add other markdown-to-jsx options.

• forceBlock
• forceInline
• namedCodesToUnicode
• disableParsingRawHTML
• slugify

options={{ forceBlock: true }}
---
options={{ forceBlock: true, forceInline: true, slugify: str => str }}

<Rearkdown
  file={markdownFile}
  components={{ CustomComponent, AnotherComponent }}
  overrides={{ h1: MyH1Component, p: MyParagraph }}
  options={{ forceBlock: true }}
/>

Help us!

This was a short time project to use somewhere needed. If you like it, you can help us to make Rearkdown better. If you have any improvement please pull-request.

License

GPL Licensed.