Skip to content

Commit 2624a3f

Browse files
committed
simplify the react integration example
1 parent 2bb591a commit 2624a3f

File tree

4 files changed

+6
-6
lines changed

4 files changed

+6
-6
lines changed

examples/using react and other custom scripts and styles/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Custom javascript and CSS
22

33
This example shows how to use custom javascript and CSS in your application.
4+
It is compatible with SQLPage v0.7.3 and above.
45

56
It integrates a simple [react](https://reactjs.org/) component and loads it with properties coming from a SQL query.
67

examples/using react and other custom scripts and styles/my_react_component.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Here we are using React and ReactDOM directly, but this file could be a compiled
22
// version of a React component written in JSX.
33

4-
function RootComponent({ greeting_name }) {
4+
function MyComponent({ greeting_name }) {
55
const [count, setCount] = React.useState(0);
66
return React.createElement(
77
'button',
@@ -13,5 +13,5 @@ function RootComponent({ greeting_name }) {
1313
for (const container of document.getElementsByClassName('react_component')) {
1414
const root = ReactDOM.createRoot(container);
1515
const props = JSON.parse(container.dataset.props);
16-
root.render(React.createElement(RootComponent, props, null));
16+
root.render(React.createElement(window[props.react_component_name], props, null));
1717
}

examples/using react and other custom scripts and styles/react.sql

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,5 @@ SELECT 'shell' AS component,
99
'my_react_component.js' AS javascript;
1010

1111
SELECT 'react_component' AS component,
12-
JSON_OBJECT(
13-
'greeting_name', 'World'
14-
) AS props;
12+
'MyComponent' AS react_component_name,
13+
'World' AS greeting_name;
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="react_component" data-props="{{props}}">
1+
<div class="react_component" data-props="{{stringify this}}">
22
Dynamic component is loading...
33
</div>

0 commit comments

Comments
 (0)