Update examples for React 18 & new JSX transform

README.md

@@ -17,11 +17,12 @@ Let's say you have an SVG available at some URL, and you'd like to inject it int
 ## Basic Usage
 
 ```jsx
-import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
-render(<ReactSVG src="svg.svg" />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(<ReactSVG src="svg.svg" />)
 ```
 
 ## Live Examples

examples/accessibility/src/index.js

@@ -1,8 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
-ReactDOM.render(
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(
   <ReactSVG
     aria-label="Description of the overall image"
     beforeInjection={(svg) => {
@@ -22,6 +23,5 @@ ReactDOM.render(
     }}
     role="img"
     src="svg.svg"
-  />,
-  document.getElementById('root')
+  />
 )

examples/api-usage/src/index.js

@@ -1,8 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
-ReactDOM.render(
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(
   <ReactSVG
     afterInjection={(error, svg) => {
       if (error) {
@@ -27,6 +28,5 @@ ReactDOM.render(
     src="svg.svg"
     useRequestCache={false}
     wrapper="span"
-  />,
-  document.getElementById('root')
+  />
 )

examples/basic-usage/src/index.js

@@ -1,5 +1,6 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
-ReactDOM.render(<ReactSVG src="svg.svg" />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(<ReactSVG src="svg.svg" />)

examples/before-injection/src/index.js

@@ -1,8 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
-ReactDOM.render(
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(
   <ReactSVG
     beforeInjection={(svg) => {
       // Add a class name to the SVG element. Note: You'll need a classList
@@ -17,6 +18,5 @@ ReactDOM.render(
       firstGElement.setAttribute('fill', 'blue')
     }}
     src="svg.svg"
-  />,
-  document.getElementById('root')
+  />
 )

examples/css-animation/src/index.js

@@ -1,7 +1,7 @@
 import './style.css'
 
-import React, { useState } from 'react'
-import ReactDOM from 'react-dom'
+import { useState } from 'react'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
 const C = () => {
@@ -28,4 +28,6 @@ const C = () => {
   )
 }
 
-ReactDOM.render(<C />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(<C />)

examples/css-in-js/src/index.js

@@ -1,6 +1,5 @@
 import { css } from 'glamor'
-import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
 css.global('body', {
@@ -25,4 +24,6 @@ const styles = css({
   },
 })
 
-render(<ReactSVG src="svg.svg" {...styles} />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(<ReactSVG src="svg.svg" {...styles} />)

examples/external-stylesheet/src/index.js

@@ -1,10 +1,8 @@
 import './style.css'
 
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
-ReactDOM.render(
-  <ReactSVG className="wrapper" src="svg.svg" />,
-  document.getElementById('root')
-)
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(<ReactSVG className="wrapper" src="svg.svg" />)

examples/fallbacks/src/index.js

@@ -1,5 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { Fragment } from 'react'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
 class ClassFallback extends React.Component {
@@ -10,11 +10,12 @@ class ClassFallback extends React.Component {
 const FunctionFallback = () => <img alt="doge" src="doge.png" />
 const StringFallback = 'div'
 
-ReactDOM.render(
-  <React.Fragment>
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(
+  <Fragment>
     <ReactSVG fallback={ClassFallback} src="notfound.svg" />
     <ReactSVG fallback={FunctionFallback} src="notfound.svg" />
     <ReactSVG fallback={StringFallback} src="notfound.svg" />
-  </React.Fragment>,
-  document.getElementById('root')
+  </Fragment>
 )

examples/loading/src/index.js

@@ -1,16 +1,17 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { Fragment } from 'react'
+import { createRoot } from 'react-dom/client'
 import ClipLoader from 'react-spinners/ClipLoader'
 import { ReactSVG } from 'react-svg'
 
-ReactDOM.render(
-  <React.Fragment>
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(
+  <Fragment>
     <ReactSVG loading={() => <ClipLoader />} src="svg.svg" />
     <ReactSVG
       fallback={() => <img alt="doge" src="doge.png" />}
       loading={() => <ClipLoader />}
       src="notfound.svg"
     />
-  </React.Fragment>,
-  document.getElementById('root')
+  </Fragment>
 )

examples/no-extension/src/index.js

@@ -1,5 +1,6 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
-ReactDOM.render(<ReactSVG src="svg" />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(<ReactSVG src="svg" />)

examples/svg-wrapper/src/index.js

@@ -1,12 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
-ReactDOM.render(
-  <ReactSVG src="svg.svg" wrapper="svg" />,
-  document.getElementById('svg-root')
-)
-ReactDOM.render(
-  <ReactSVG src="svg.svg" wrapper="svg" />,
-  document.getElementById('html-root')
-)
+const svgContainer = document.getElementById('svg-root')
+const svgRoot = createRoot(svgContainer)
+svgRoot.render(<ReactSVG src="svg.svg" wrapper="svg" />)
+
+const htmlContainer = document.getElementById('html-root')
+const htmlRoot = createRoot(htmlContainer)
+htmlRoot.render(<ReactSVG src="svg.svg" wrapper="svg" />)

examples/typescript/src/index.tsx

@@ -1,5 +1,7 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { ReactSVG } from 'react-svg'
 
-ReactDOM.render(<ReactSVG src="svg.svg" />, document.getElementById('root'))
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const container = document.getElementById('root')!
+const root = createRoot(container)
+root.render(<ReactSVG src="svg.svg" />)

examples/umd-dev/index.html

@@ -13,10 +13,9 @@
   <body>
     <div id="app"></div>
     <script type="text/babel">
-      ReactDOM.render(
-        <ReactSVG src="svg.svg" />,
-        document.getElementById('app')
-      )
+      const container = document.getElementById('root')
+      const root = ReactDOM.createRoot(container)
+      root.render(<ReactSVG src="svg.svg" />)
     </script>
   </body>
 </html>

examples/umd-prod/index.html

@@ -12,10 +12,9 @@
   <body>
     <div id="app"></div>
     <script type="text/babel">
-      ReactDOM.render(
-        <ReactSVG src="svg.svg" />,
-        document.getElementById('app')
-      )
+      const container = document.getElementById('root')
+      const root = ReactDOM.createRoot(container)
+      root.render(<ReactSVG src="svg.svg" />)
     </script>
   </body>
 </html>