Merge pull request #33 from moveyourdigital/issue-25-raw-html

Add support for Raw HTML block

Author: lightningspirit

README.md

@@ -57,6 +57,7 @@ The package ships with the following renderers, but you can include your custom
 - Table
 - Quote
 - Delimiter
+- Raw (HTML)
 
 ## Styling and optional configs
 

src/index.tsx

@@ -7,6 +7,7 @@ import Image from './renderers/image';
 import List from './renderers/list';
 import Paragraph from './renderers/paragraph';
 import Quote from './renderers/quote';
+import Raw from './renderers/raw';
 import Table from './renderers/table';
 
 export type ConfigProp = Record<string, RenderConfig>;
@@ -59,6 +60,7 @@ const Blocks = ({
     paragraph: Paragraph,
     quote: Quote,
     table: Table,
+    raw: Raw,
   };
 
   const availableRenderers = {
@@ -92,4 +94,5 @@ export {
   Paragraph as ParagraphBlock,
   Quote as QuoteBlock,
   Table as TableBlock,
+  Raw as RawBlock,
 };

src/renderers/raw/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Raw /> when receives a raw block renders content as HTML 1`] = `
+<div
+  style={
+    Object {
+      "background": "#000",
+      "color": "#fff",
+      "fontSize": "30px",
+      "padding": "50px",
+    }
+  }
+>
+  Any HTML code
+</div>
+`;

src/renderers/raw/index.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+import Raw, { RawBlockData } from '.';
+
+describe('<Raw />', () => {
+  describe('when receives a raw block', () => {
+    const data: RawBlockData = {
+      html: '<div style="background: #000; color: #fff; font-size: 30px; padding: 50px;">Any HTML code</div>',
+    };
+
+    it('renders content as HTML', () => {
+      expect(create(<Raw data={data} />).toJSON()).toMatchSnapshot();
+    });
+  });
+});

src/renderers/raw/index.tsx

@@ -0,0 +1,13 @@
+import HTMLReactParser from 'html-react-parser';
+import React from 'react';
+import { RenderFn } from '../..';
+
+export interface RawBlockData {
+  html: string;
+}
+
+const Raw: RenderFn<RawBlockData> = ({ data }) => {
+  return <>{data?.html && HTMLReactParser(data.html)}</>;
+};
+
+export default Raw;