From ac1bce3939eb3a3eb80ef6b01af1ec97cad8e58a Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Wed, 13 Jul 2022 12:11:45 -0700
Subject: [PATCH 1/2] docs(README.md): add comment to handle React 18
 createRoot API, fixes #157

---
 README.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/README.md b/README.md
index 6aa715c..0dc59ec 100755
--- a/README.md
+++ b/README.md
@@ -84,6 +84,7 @@ yarn add prism-react-renderer
 ```jsx
 import React from "react";
 import { render } from "react-dom";
+// import { createRoot } from "react-dom/client";
 import Highlight, { defaultProps } from "prism-react-renderer";
 
 const exampleCode = `
@@ -111,6 +112,24 @@ render(
   </Highlight>,
   document.getElementById('root')
 );
+
+// If you are using React 18
+// const root = createRoot(document.getElementById('root'));
+// root.render(
+//  <Highlight {...defaultProps} code={exampleCode} language="jsx">
+//   {({ className, style, tokens, getLineProps, getTokenProps }) => (
+//     <pre className={className} style={style}>
+//       {tokens.map((line, i) => (
+//         <div {...getLineProps({ line, key: i })}>
+//           {line.map((token, key) => (
+//             <span {...getTokenProps({ token, key })} />
+//           ))}
+//         </div>
+//       ))}
+//     </pre>
+//   )}
+//  </Highlight>
+// )
 ```
 
 `<Highlight />` is the only component exposed by this package, as inspired by

From e02d234d79d3a268d0d9d4e44cbf6b476315fd87 Mon Sep 17 00:00:00 2001
From: Narin Luangrath <nluangrath@godaddy.com>
Date: Thu, 14 Jul 2022 15:09:03 -0700
Subject: [PATCH 2/2] docs(README.md): dedup example code

---
 README.md | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 0dc59ec..e463524 100755
--- a/README.md
+++ b/README.md
@@ -96,7 +96,7 @@ const exampleCode = `
 return () => <App />;
 `;
 
-render(
+const Content = (
   <Highlight {...defaultProps} code={exampleCode} language="jsx">
     {({ className, style, tokens, getLineProps, getTokenProps }) => (
       <pre className={className} style={style}>
@@ -109,27 +109,13 @@ render(
         ))}
       </pre>
     )}
-  </Highlight>,
-  document.getElementById('root')
+  </Highlight>
 );
+render(Content, document.getElementById('root'));
 
 // If you are using React 18
 // const root = createRoot(document.getElementById('root'));
-// root.render(
-//  <Highlight {...defaultProps} code={exampleCode} language="jsx">
-//   {({ className, style, tokens, getLineProps, getTokenProps }) => (
-//     <pre className={className} style={style}>
-//       {tokens.map((line, i) => (
-//         <div {...getLineProps({ line, key: i })}>
-//           {line.map((token, key) => (
-//             <span {...getTokenProps({ token, key })} />
-//           ))}
-//         </div>
-//       ))}
-//     </pre>
-//   )}
-//  </Highlight>
-// )
+// root.render(Content);
 ```
 
 `<Highlight />` is the only component exposed by this package, as inspired by