# markdown-to-rex

> ReasonML bindings for markdown-to-jsx javascript package

Latest version **0.1.1** (published 2019-06-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install markdown-to-rex
pnpm add markdown-to-rex
yarn add markdown-to-rex
bun add markdown-to-rex
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-06-30 |
| First published | 2019-06-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | DerivedMate |
| Maintainers | lastshadowpl |
| Keywords | BuckleScript, ReasonML, ReasonReact, Markdown, markdown-to-jsx |

## Links

- npm: https://www.npmjs.com/package/markdown-to-rex
- npm.io page: https://npm.io/package/markdown-to-rex

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.8.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.1
- [reason-react](https://npm.io/package/reason-react.md) >=0.7.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.1.1 (latest) — 2019-06-30
- 0.1.0 — 2019-06-30

## README

# markdown-to-rex

## Table of Contents:

1. [Installation](#inst)
1. [Usage](#us)
   1. [Markdown](#us-mark)
   1. [JSX Extended Markdown](#us-mark-ext)
   1. [Other options](#us-ops)

## <div id="inst"> Installation

`npm i markdown-to-rex`

## <div id="us"> Usage

### <div id="us-mark"> Usage > Markdown

Just as the package [markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx), you can you this one to parse markdown in ReasonML. Although the example below uses interpolated strings, you can still use the good old `"Double quotes string :)"`.

```reason
[@react.component]
let make = () =>
  <Markdown>
    {|
      # Hello
      ## there
      ### mate
    |}
  </Markdown>
```

Renders
```html
<div>
  <h1 id="hello">Hello</h1>
  <h2 id="there">there</h2>
  <h3 id="mate">mate</h3>
</div>
```

### <div id="us-mark-ext"> Usage > JSX Extended Markdown

You can also use custom ReasonReact components, but there are some caveats...
Firstyl, your component can't be passed directly as a prop (because of [ReasonReact design](https://reasonml.github.io/reason-react/docs/en/component-as-prop)).<br/>
Secondly, your component's props (arguments) can be undefined, so you have to handle that.<br/>
Here's a way to tackle these problems:
```reason
// Here's our component. As you can see, it's nothing special.
module FancyText {
  [@react.component]
  let make = (~prefix=?, ~children: React.element=?) => {
    <div>
      // Helpers.vor does basically: (val, def) => val ? val : def
      {(prefix->Helpers.vor("") ++ " Fancy Text: ")->React.string}
      <strong> children </strong>
    </div>;
  };
}

// Here's where the magic begins...
// This is our higher-order function which we can pass as a property
// It also needs to define all it's props
let fancy_text:
  Markdown.props({
    .
    children: React.element,
    prefix: string,
  }) =
  p =>
    switch (p) {
    | Some(p) => <FancyText prefix=p##prefix> {p##children} </FancyText>
    | None => <FancyText />
    };

// After all of this hard work we can get to the good stuff - actually using out component

ReactDOMRe.renderToElementWithId(
  <Markdown
    overrides=[|("FancyText", fancy_text |> Markdown.override_of_component)|]>
    {|
      # Title
      <FancyText prefix="This is my "> it's fancy</FancyText>
    |}
  </Markdown>,
  "root",
);
```
To our `Markdown` component, we're passing all of our overrides in a form of 
```reason
array((
  string /*tag name*/, 
  override /*higher-order component passed through Markdown.override_of_component*/
))
```

### <div id="us-ops"> Usage > Other Options
You can also use the `forceInline` and `forceBlock` options from the original package.
```reason
// They both default ot false (as stated in the original documentation)
<Markdown forceInline=true forceBlock=false>
    {|
      # Hello
      lorem ipsum dolor sit amet
    |}
  </Markdown>
```

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