markdown-to-rex
Table of Contents:
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
Hello there mate
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 propslet 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>