Skip to content

Commit

Permalink
Merge pull request #1733 from tanem/housekeeping
Browse files Browse the repository at this point in the history
Update examples
  • Loading branch information
tanem committed Apr 9, 2022
2 parents 3a5c30c + 0008c92 commit def58a0
Show file tree
Hide file tree
Showing 17 changed files with 17,019 additions and 85 deletions.
7 changes: 4 additions & 3 deletions README.md
Expand Up @@ -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
Expand Down
10 changes: 5 additions & 5 deletions 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) => {
Expand All @@ -22,6 +23,5 @@ ReactDOM.render(
}}
role="img"
src="svg.svg"
/>,
document.getElementById('root')
/>
)
10 changes: 5 additions & 5 deletions 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) {
Expand All @@ -27,6 +28,5 @@ ReactDOM.render(
src="svg.svg"
useRequestCache={false}
wrapper="span"
/>,
document.getElementById('root')
/>
)
7 changes: 4 additions & 3 deletions 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" />)
10 changes: 5 additions & 5 deletions 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
Expand All @@ -17,6 +18,5 @@ ReactDOM.render(
firstGElement.setAttribute('fill', 'blue')
}}
src="svg.svg"
/>,
document.getElementById('root')
/>
)
8 changes: 5 additions & 3 deletions 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 = () => {
Expand All @@ -28,4 +28,6 @@ const C = () => {
)
}

ReactDOM.render(<C />, document.getElementById('root'))
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<C />)
7 changes: 4 additions & 3 deletions 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', {
Expand All @@ -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} />)
10 changes: 4 additions & 6 deletions 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" />)
13 changes: 7 additions & 6 deletions 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 {
Expand All @@ -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>
)
13 changes: 7 additions & 6 deletions 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>
)
7 changes: 4 additions & 3 deletions 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" />)
18 changes: 8 additions & 10 deletions 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" />)
8 changes: 5 additions & 3 deletions 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" />)
3 changes: 1 addition & 2 deletions examples/umd-dev/index.html
Expand Up @@ -4,7 +4,6 @@
<title>ReactSVG UMD Dev Example</title>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom-server.browser.development.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.js"></script>
<script src="https://unpkg.com/react-svg/dist/react-svg.umd.development.js"></script>
Expand All @@ -14,7 +13,7 @@
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<ReactSVG src="svg.svg" />,
<ReactSVG.ReactSVG src="svg.svg" />,
document.getElementById('app')
)
</script>
Expand Down

0 comments on commit def58a0

Please sign in to comment.