Skip to content

Commit 652a59b

Browse files
peternewnhampeternewnham
committed
Add demo
1 parent 50fc018 commit 652a59b

22 files changed

+485
-2
lines changed

‎demo/.babelrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
"react",
4+
"es2015",
5+
"stage-2"
6+
]
7+
}

‎demo/package.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "react-html-parser-demo",
3+
"version": "0.0.0",
4+
"description": "Demo for the React HTML Parser library",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "node server.js",
8+
"build": "webpack --config webpack.config.production.js --progress",
9+
"test": "echo \"Error: no test specified\" && exit 1"
10+
},
11+
"author": "Peter Newnham",
12+
"license": "MIT",
13+
"devDependencies": {
14+
"autoprefixer": "6.3.1",
15+
"babel-cli": "^6.4.5",
16+
"babel-core": "^6.4.5",
17+
"babel-preset-es2015": "^6.3.13",
18+
"babel-preset-react": "^6.3.13",
19+
"babel-preset-stage-2": "6.3.13",
20+
"css-loader": "0.23.1",
21+
"extract-text-webpack-plugin": "1.0.1",
22+
"html-webpack-plugin": "2.7.1",
23+
"json-loader": "0.5.4",
24+
"node-sass": "3.4.2",
25+
"postcss-loader": "0.8.0",
26+
"react-hot-loader": "1.3.0",
27+
"redux-devtools": "3.0.1",
28+
"sass-loader": "3.1.2",
29+
"style-loader": "0.13.0",
30+
"webpack": "^1.12.12",
31+
"webpack-dev-server": "^1.14.1"
32+
},
33+
"dependencies": {
34+
"brace": "0.7.0",
35+
"normalize-scss": "4.0.3",
36+
"react": "0.14.6",
37+
"react-ace": "3.1.0",
38+
"react-dom": "0.14.6",
39+
"react-redux": "4.0.6",
40+
"redux": "3.0.5"
41+
}
42+
}

‎demo/server.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var webpack = require('webpack');
2+
var WebpackDevServer = require('webpack-dev-server');
3+
var config = require('./webpack.config.development');
4+
5+
new WebpackDevServer(webpack(config), {
6+
hot: true,
7+
historyApiFallback: true,
8+
stats: {
9+
colors: true
10+
}
11+
}).listen(3000, 'localhost', function (err, result) {
12+
if (err) {
13+
console.log(err);
14+
}
15+
16+
console.log('Listening at localhost:3000');
17+
});

‎demo/src/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5+
<title>React HTML Parser Demo</title>
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
</body>
10+
</html>

‎demo/src/js/actions.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export function updateHtml(html) {
2+
return {
3+
type: 'UPDATE_HTML',
4+
html
5+
};
6+
}

‎demo/src/js/components/Content.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { PropTypes } from 'react';
2+
import 'sass/content';
3+
4+
import Editor from './Editor';
5+
import Html from './Html';
6+
7+
export default function Content(props) {
8+
const { html, onUpdateClick } = props;
9+
return (
10+
<main id="content">
11+
<Editor initialHtml={ html } onUpdateClick={ onUpdateClick } />
12+
<Html html={ html } />
13+
</main>
14+
);
15+
}
16+
17+
Content.propTypes = {
18+
html: PropTypes.string.isRequired,
19+
onUpdateClick: PropTypes.func.isRequired
20+
};

‎demo/src/js/components/Editor.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import brace from 'brace';
3+
import AceEditor from 'react-ace';
4+
import 'brace/mode/html';
5+
import 'brace/theme/chrome';
6+
7+
import 'sass/editor';
8+
9+
export default class Editor extends Component {
10+
constructor(props) {
11+
super();
12+
this.state = {
13+
html: props.initialHtml
14+
};
15+
this.onChange = this.onChange.bind(this);
16+
this.onEditorLoad = this.onEditorLoad.bind(this);
17+
}
18+
onChange(newValue) {
19+
this.setState({
20+
html: newValue
21+
});
22+
}
23+
onEditorLoad(editor) {
24+
editor.session.setUseWorker(false);
25+
editor.session.setUseWrapMode(true);
26+
}
27+
render() {
28+
const { onUpdateClick } = this.props;
29+
const { html } = this.state;
30+
return (
31+
<div id="editor">
32+
<AceEditor mode="html"
33+
theme="chrome"
34+
name="HTML_EDITOR"
35+
value={ html }
36+
width="100%"
37+
height="auto"
38+
onChange={this.onChange}
39+
onLoad={this.onEditorLoad}
40+
editorProps={{
41+
$blockScrolling: Infinity,
42+
wrap: true
43+
}}
44+
/>
45+
<div className="buttons">
46+
<button onClick={ () => onUpdateClick(html) }>Update HTML</button>
47+
</div>
48+
</div>
49+
);
50+
}
51+
}
52+
53+
Editor.propTypes = {
54+
initialHtml: React.PropTypes.string.isRequired,
55+
onUpdateClick: React.PropTypes.func.isRequired
56+
};
57+
58+
export default Editor;

‎demo/src/js/components/Header.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
3+
import 'sass/header';
4+
5+
export default function Header() {
6+
return (
7+
<header>
8+
<h1>React HTML Parser Demo</h1>
9+
</header>
10+
);
11+
}

‎demo/src/js/components/Html.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { PropTypes } from 'react';
2+
import ReactHtmlParser from 'react-html-parser';
3+
4+
import 'sass/html';
5+
6+
export default function Html(props) {
7+
const { html } = props;
8+
return (
9+
<div id="html">
10+
{ ReactHtmlParser(html) }
11+
</div>
12+
);
13+
}
14+
15+
Html.propTypes = {
16+
html: PropTypes.string.isRequired
17+
};

‎demo/src/js/containers/App.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
4+
import Header from '../components/Header';
5+
import Content from '../components/Content';
6+
7+
import 'sass/app';
8+
9+
import { updateHtml } from '../actions';
10+
11+
class App extends React.Component {
12+
render() {
13+
const { dispatch, html } = this.props;
14+
return (
15+
<div id="app">
16+
<Header />
17+
<Content onUpdateClick={ html => dispatch(updateHtml(html)) } html={ html } />
18+
</div>
19+
);
20+
}
21+
}
22+
23+
function select(state) {
24+
return {
25+
html: state.html
26+
};
27+
}
28+
29+
export default connect(select)(App);

0 commit comments

Comments
 (0)