Accept options as direct props

README.md

@@ -39,10 +39,6 @@ ReactDom.render(<Markdown># Hello world!</Markdown>, rootEl);
 ### Component Props
 
 - **value** - A markdown string(markdown).
-- **options** - See [Options](#Options)
-
-### Options
-
 - **baseURL** [`string`] - A prefix url for any relative link.
 - **openLinksInNewTab** [`boolean`] - Attribute `target=_blank` will be added to link elements
 - **langPrefix** [`string`] - A string to prefix the className in a `<code>` block. Useful for syntax highlighting. Defaults to `language-`.

src/Markdown.js

@@ -1,17 +1,8 @@
 import { createElement, Fragment } from 'react';
 import { lexer } from 'marked';
 
-import ReactParser, { defaultParserOptions } from './ReactParser';
-
-const defaultLexerOptions = {
-  breaks: false,
-  gfm: true,
-};
-
-const defaultOptions = {
-  ...defaultLexerOptions,
-  ...defaultParserOptions,
-};
+import defaults from './defaults';
+import ReactParser from './ReactParser';
 
 const validateComponentProps = (props) => {
   if (props.value && typeof props.value !== 'string') {
@@ -26,32 +17,27 @@ const validateComponentProps = (props) => {
 const Markdown = (props) => {
   validateComponentProps(props);
 
-  // assign default options
-  const options = { ...defaultOptions, ...props.options };
-
   // lexer options
   const lexerOptions = {
-    breaks: options.breaks,
-    gfm: options.gfm,
+    breaks: props.breaks,
+    gfm: props.gfm,
   };
 
   // convert input markdown into tokens
   const tokens = lexer(props.value ?? props.children ?? '', lexerOptions);
 
   // parser options
   const parserOptions = {
-    baseURL: options.baseURL,
-    openLinksInNewTab: options.openLinksInNewTab,
-    langPrefix: options.langPrefix,
+    baseURL: props.baseURL,
+    openLinksInNewTab: props.openLinksInNewTab,
+    langPrefix: props.langPrefix,
   };
 
   const children = new ReactParser(parserOptions).parse(tokens);
 
   return createElement(Fragment, null, children);
 };
 
-Markdown.defaultProps = {
-  options: defaultOptions,
-};
+Markdown.defaultProps = defaults;
 
 export default Markdown;

src/ReactParser.js

@@ -1,14 +1,10 @@
 import ReactRenderer from './ReactRenderer';
 import { unescape, joinBase } from './helpers';
 
-export const defaultParserOptions = {
-  baseURL: null,
-  openLinksInNewTab: true,
-  langPrefix: 'language-',
-};
+import defaults from './defaults';
 
 class ReactParser {
-  constructor(options = defaultParserOptions) {
+  constructor(options = defaults) {
     this.options = options;
     this.renderer = new ReactRenderer();
   }

src/defaults.js

@@ -0,0 +1,9 @@
+const defaults = {
+  breaks: false,
+  gfm: true,
+  baseURL: null,
+  openLinksInNewTab: true,
+  langPrefix: 'language-',
+};
+
+export default defaults;

src/index.d.ts

@@ -2,16 +2,15 @@ declare module 'marked-react' {
   import React from 'react';
 
   export interface MarkdownOptions {
+    breaks?: boolean;
+    gfm?: boolean;
     baseURL?: string;
     openLinksInNewTab?: boolean;
     langPrefix?: string;
-    breaks?: boolean;
-    gfm?: boolean;
   }
 
-  interface Props {
+  interface Props extends MarkdownOptions {
     value: string;
-    options: MarkdownOptions;
   }
 
   const Markdown: React.FC<Props>;

tests/markdown.spec.js

@@ -44,30 +44,24 @@ const cases = [
     markdown: '[Google](https://google.com)',
     html: '<p><a href="https://google.com" target="_blank">Google</a></p>',
     props: {
-      options: {
-        openLinksInNewTab: true,
-      },
+      openLinksInNewTab: true,
     },
   },
   {
     title: 'render links without target=_blank',
     markdown: '[Google](https://google.com)',
     html: '<p><a href="https://google.com">Google</a></p>',
     props: {
-      options: {
-        openLinksInNewTab: false,
-      },
+      openLinksInNewTab: false,
     },
   },
   {
     title: 'add base url to the links for relative paths',
     markdown: '[Google](file)',
     html: '<p><a href="https://google.com/file">Google</a></p>',
     props: {
-      options: {
-        baseURL: 'https://google.com',
-        openLinksInNewTab: false,
-      },
+      baseURL: 'https://google.com',
+      openLinksInNewTab: false,
     },
   },
   {
@@ -80,9 +74,7 @@ const cases = [
     markdown: '![Random Image](pic.png)',
     html: '<p><img src="https://placeholder.com/pic.png" alt="Random Image"/></p>',
     props: {
-      options: {
-        baseURL: 'https://placeholder.com',
-      },
+      baseURL: 'https://placeholder.com',
     },
   },
   {
@@ -110,9 +102,7 @@ const cases = [
     markdown: '```js\nconsole.log("Hello world!")\n```',
     html: '<pre><code class="lang-js">console.log(&quot;Hello world!&quot;)</code></pre>',
     props: {
-      options: {
-        langPrefix: 'lang-',
-      },
+      langPrefix: 'lang-',
     },
   },
   {
@@ -155,10 +145,8 @@ const cases = [
     markdown: 'Hello\nWorld!\n',
     html: '<p>Hello<br/>World!</p>',
     props: {
-      options: {
-        breaks: true,
-        gfm: true,
-      },
+      breaks: true,
+      gfm: true,
     },
   },
   {
@@ -181,9 +169,7 @@ const cases = [
     markdown: '- [x] checked\n- [ ] unchecked',
     html: '<ul><li>[x] checked</li><li>[ ] unchecked</li></ul>',
     props: {
-      options: {
-        gfm: false,
-      },
+      gfm: false,
     },
   },
 ];