Skip to content

Commit 9a40ad7

Browse files
remarkablemarkremarkablemark
authored
Merge pull request #119 from remarkablemark/chore/examples
chore(examples): tidy script and amd examples; add app bootstrapped by create-react-app
2 parents f1990c1 + 53f8a44 commit 9a40ad7

File tree

12 files changed

+166
-71
lines changed

12 files changed

+166
-71
lines changed

‎examples/amd.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div id="root" style="padding: 50px;"></div>
2+
3+
<!-- RequireJS -->
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
5+
6+
<script>
7+
window.requirejs.config({
8+
paths: {
9+
'html-react-parser': '../dist/html-react-parser.min',
10+
react: 'https://unpkg.com/react@16/umd/react.development',
11+
'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.development'
12+
}
13+
});
14+
15+
window.requirejs(['html-react-parser', 'react-dom'], function(
16+
HTMLReactParser,
17+
ReactDOM
18+
) {
19+
ReactDOM.render(
20+
HTMLReactParser(
21+
'<h2 style="font-family:\'Lucida Grande\';">' +
22+
'HTMLReactParser loaded with RequireJS' +
23+
'<\/h2>'
24+
),
25+
document.getElementById('root')
26+
);
27+
});
28+
</script>

‎examples/app/.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎examples/app/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# html-react-parser app
2+
3+
Example of `html-react-parser` used in [Create React App](https://github.com/facebook/create-react-app).
4+
5+
## Install
6+
7+
```sh
8+
$ cd examples/app/
9+
$ npm install
10+
```
11+
12+
## Scripts
13+
14+
Start:
15+
16+
```sh
17+
$ npm start
18+
```
19+
20+
Build:
21+
22+
```sh
23+
$ npm run build
24+
```

‎examples/app/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"scripts": {
3+
"start": "react-scripts start",
4+
"build": "react-scripts build"
5+
},
6+
"dependencies": {
7+
"html-react-parser": "../../",
8+
"react": "^16.8.6",
9+
"react-dom": "^16.8.6",
10+
"react-scripts": "3.0.1"
11+
},
12+
"eslintConfig": {
13+
"extends": "react-app"
14+
},
15+
"browserslist": {
16+
"production": [
17+
">0.2%",
18+
"not dead",
19+
"not op_mini all"
20+
],
21+
"development": [
22+
"last 1 chrome version",
23+
"last 1 firefox version",
24+
"last 1 safari version"
25+
]
26+
}
27+
}

‎examples/app/public/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="theme-color" content="#000000" />
7+
<!--
8+
Notice the use of %PUBLIC_URL% in the tags above.
9+
It will be replaced with the URL of the `public` folder during the build.
10+
Only files inside the `public` folder can be referenced from the HTML.
11+
12+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13+
work correctly both with client-side routing and a non-root public URL.
14+
Learn how to configure a non-root public URL by running `npm run build`.
15+
-->
16+
<title>html-react-parser app</title>
17+
</head>
18+
<body>
19+
<noscript>You need to enable JavaScript to run this app.</noscript>
20+
<div id="root"></div>
21+
<!--
22+
This HTML file is a template.
23+
If you open it directly in the browser, you will see an empty page.
24+
25+
You can add webfonts, meta tags, or analytics to this file.
26+
The build step will place the bundled scripts into the <body> tag.
27+
28+
To begin the development, run `npm start` or `yarn start`.
29+
To create a production bundle, use `npm run build` or `yarn build`.
30+
-->
31+
</body>
32+
</html>

‎examples/app/src/App.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.App {
2+
padding: 50px;
3+
}

‎examples/app/src/App.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import parse, { domToReact, htmlToDOM } from 'html-react-parser';
3+
import './App.css';
4+
5+
console.log(domToReact);
6+
console.log(htmlToDOM);
7+
8+
export default function App() {
9+
return (
10+
<div className="App">
11+
{parse(`
12+
<h2 style="font-family: 'Lucida Grande';">
13+
HTMLReactParser loaded with Create React App
14+
</h2>
15+
`)}
16+
</div>
17+
);
18+
}

‎examples/app/src/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render(<App />, document.getElementById('root'));

‎examples/requirejs.html

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎examples/script-tag.html

Lines changed: 0 additions & 32 deletions
This file was deleted.

0 commit comments

Comments
 (0)