Merge pull request #26 from remarkablemark/examples

remarkablemark · web-flow · commit cfffc97fe9be · 2016-09-27T23:27:11.000-04:00
Add examples
diff --git a/.npmignore b/.npmignore
@@ -1,5 +1,6 @@
 test
 coverage
+examples
 webpack.config.js
 .eslint*
 .travis*
diff --git a/examples/requirejs.html b/examples/requirejs.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Load with Require.js (AMD)</title>
+    </head>
+    <body style="padding: 50px">
+        <div id="root"></div>
+
+        <!-- Require.js -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
+
+        <script>
+            requirejs.config({
+                paths: {
+                    'html-react-parser': 'https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min',
+                    'react': 'https://unpkg.com/react@latest/dist/react.min',
+                    'react-dom': 'https://unpkg.com/react-dom@latest/dist/react-dom.min'
+                }
+            });
+
+            requirejs([
+                'react-dom', 'html-react-parser'
+            ], function(ReactDOM, HTMLReactParser) {
+                ReactDOM.render(
+                    HTMLReactParser(
+                        '<h2 style="font-family:\'Lucida Grande\';">' +
+                            'HTMLReactParser loaded with Require.js' +
+                        '<\/h2>'
+                    ),
+                    document.getElementById('root')
+                );
+            });
+        </script>
+    </body>
+</html>
diff --git a/examples/script-tag.html b/examples/script-tag.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Load with Script Tag</title>
+    </head>
+    <body style="padding: 50px">
+        <div id="root"></div>
+
+        <!-- HTMLReactParser depends on React -->
+        <script src="https://unpkg.com/react@latest/dist/react.min.js"></script>
+        <script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
+
+        <!-- ReactDOM -->
+        <script src="https://unpkg.com/react-dom@latest/dist/react-dom.min.js"></script>
+        <script>
+            ReactDOM.render(
+                HTMLReactParser(
+                    '<h2 style="font-family:\'Lucida Grande\';">' +
+                        'HTMLReactParser loaded with script tag' +
+                    '<\/h2>'
+                ),
+                document.getElementById('root')
+            );
+        </script>
+    </body>
+</html>
