Rearkdown is a react component for using your custom component in markdown files.
npm install rearkdown
# yarn add rearkdown
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;
# 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
...
...
...
file
required - a markdown file you importedcomponents
- An object of components to import your component into markdown fileoverrides
- Assign new components to default html tagsoptions
- Other options which markdown-to-jsx provides. (forceBlock, forceInline etc.)
Using react-rough-notation as our custom component
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;
# 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
You can add your custom components to use in markdown file.
components={{ MyComponent, AnotherComponent }}
<Rearkdown
file={markdownFile}
components={{ CustomComponent, AnotherComponent }}
/>
components={{ "HelloWorld": MyComponent, AnotherComponent }}
Now your MyComponent will be used as <HelloWorld>
in markdown file.
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 }}
/>
You can add other markdown-to-jsx options.
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 }}
/>
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.
GPL Licensed.