Skip to content

Commit 53f8a44

Browse files
chore(examples): add example app bootstrapped by Create React App
This is useful for testing that `html-react-parser` is properly consumed and bundled by webpack.
1 parent 24fad26 commit 53f8a44

File tree

7 files changed

+110
-0
lines changed

7 files changed

+110
-0
lines changed

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'));

0 commit comments

Comments
 (0)