markdown-to-rex

Table of Contents:

1. Installation
2. Usage
   1. Markdown
   2. JSX Extended Markdown
   3. Other options

Installation

npm i markdown-to-rex

Usage

Usage > Markdown

Just as the 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 :)".

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

Renders

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

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). Secondly, your component's props (arguments) can be undefined, so you have to handle that. Here's a way to tackle these problems:

// 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

array((
  string /*tag name*/, 
  override /*higher-order component passed through Markdown.override_of_component*/
))

Usage > Other Options

You can also use the forceInline and forceBlock options from the original package.

// They both default ot false (as stated in the original documentation)
<Markdown forceInline=true forceBlock=false>
    {|
      # Hello
      lorem ipsum dolor sit amet
    |}
  </Markdown>