Skip to content

Commit bc4113b

Browse files
raheeliftikhar5raheeliftikhar5
committed
use lowcoder-sdk
1 parent 77f8416 commit bc4113b

File tree

5 files changed

+104
-124
lines changed

5 files changed

+104
-124
lines changed

‎components/LowcoderAppWrapper.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { LowcoderAppView } from "lowcoder-sdk";
2+
3+
function LowcoderAppWrapper(props) {
4+
const { appId } = props;
5+
return (
6+
<section style={{marginTop: '2rem'}}>
7+
<div style={{
8+
display: 'flex',
9+
justifyContent: 'space-between',
10+
alignItems: 'center',
11+
}}>
12+
<h1>Lowcoder App</h1>
13+
</div>
14+
<LowcoderAppView
15+
appId={appId}
16+
// baseUrl="http://localhost:3000"
17+
/>
18+
</section>
19+
)
20+
}
21+
22+
export default LowcoderAppWrapper;

‎components/LowcoderModuleWrapper.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useRef } from "react";
2+
import { LowcoderAppView } from "lowcoder-sdk";
3+
4+
function LowcoderModuleWrapper(props) {
5+
const { appId } = props;
6+
const appRef = useRef();
7+
return (
8+
<section style={{marginTop: '2rem'}}>
9+
<div style={{
10+
display: 'flex',
11+
justifyContent: 'space-between',
12+
alignItems: 'center',
13+
}}>
14+
<h1>Lowcoder Module</h1>
15+
<button
16+
type="button"
17+
onClick={() => {
18+
appRef?.current?.invokeMethod("ShowNotification")
19+
}}
20+
>
21+
Invoke module method
22+
</button>
23+
</div>
24+
<LowcoderAppView
25+
ref={appRef}
26+
appId={appId}
27+
// baseUrl="http://localhost:3000"
28+
/>
29+
</section>
30+
)
31+
}
32+
33+
export default LowcoderModuleWrapper;

‎package-lock.json

+27
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"start": "next start"
77
},
88
"dependencies": {
9+
"lowcoder-sdk": "^2.4.0-beta",
910
"next": "latest",
1011
"react": "18.2.0",
1112
"react-dom": "18.2.0"

‎pages/index.js

+21-124
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,28 @@
1-
import Head from 'next/head';
2-
import styles from '../styles/Home.module.css';
1+
import dynamic from 'next/dynamic';
2+
import "lowcoder-sdk/dist/style.css";
33

4-
export default function Home() {
5-
return (
6-
<div className={styles.container}>
7-
<Head>
8-
<title>Create Next App</title>
9-
<link rel="icon" href="/favicon.ico" />
10-
</Head>
11-
12-
<main>
13-
<h1 className={styles.title}>
14-
Welcome to <a href="https://nextjs.org">Next.js!</a>
15-
</h1>
16-
17-
<p className={styles.description}>
18-
Get started by editing <code>pages/index.js</code>
19-
</p>
20-
21-
<div className={styles.grid}>
22-
<a href="https://nextjs.org/docs" className={styles.card}>
23-
<h3>Documentation &rarr;</h3>
24-
<p>Find in-depth information about Next.js features and API.</p>
25-
</a>
4+
const LowcoderAppWrapper = dynamic(
5+
() => import('../components/LowcoderAppWrapper'), {ssr: false}
6+
);
267

27-
<a href="https://nextjs.org/learn" className={styles.card}>
28-
<h3>Learn &rarr;</h3>
29-
<p>Learn about Next.js in an interactive course with quizzes!</p>
30-
</a>
8+
const LowcoderModuleWrapper = dynamic(
9+
() => import('../components/LowcoderModuleWrapper'), {ssr: false}
10+
);
3111

32-
<a
33-
href="https://github.com/vercel/next.js/tree/canary/examples"
34-
className={styles.card}
35-
>
36-
<h3>Examples &rarr;</h3>
37-
<p>Discover and deploy boilerplate example Next.js projects.</p>
38-
</a>
39-
40-
<a
41-
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
42-
className={styles.card}
43-
>
44-
<h3>Deploy &rarr;</h3>
45-
<p>
46-
Instantly deploy your Next.js site to a public URL with Vercel.
47-
</p>
48-
</a>
49-
</div>
50-
</main>
51-
52-
<footer>
53-
<a
54-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
55-
target="_blank"
56-
rel="noopener noreferrer"
57-
>
58-
Powered by{' '}
59-
<img src="/vercel.svg" alt="Vercel" className={styles.logo} />
60-
</a>
61-
</footer>
62-
63-
<style jsx>{`
64-
main {
65-
padding: 5rem 0;
66-
flex: 1;
67-
display: flex;
68-
flex-direction: column;
69-
justify-content: center;
70-
align-items: center;
71-
}
72-
footer {
73-
width: 100%;
74-
height: 100px;
75-
border-top: 1px solid #eaeaea;
76-
display: flex;
77-
justify-content: center;
78-
align-items: center;
79-
}
80-
footer img {
81-
margin-left: 0.5rem;
82-
}
83-
footer a {
84-
display: flex;
85-
justify-content: center;
86-
align-items: center;
87-
text-decoration: none;
88-
color: inherit;
89-
}
90-
code {
91-
background: #fafafa;
92-
border-radius: 5px;
93-
padding: 0.75rem;
94-
font-size: 1.1rem;
95-
font-family:
96-
Menlo,
97-
Monaco,
98-
Lucida Console,
99-
Liberation Mono,
100-
DejaVu Sans Mono,
101-
Bitstream Vera Sans Mono,
102-
Courier New,
103-
monospace;
104-
}
105-
`}</style>
12+
export default function Home() {
13+
return (
14+
<div style={{
15+
padding: '1rem',
16+
}}>
17+
18+
<LowcoderAppWrapper
19+
appId='6555df30b100825d173060ef'
20+
/>
21+
22+
<LowcoderModuleWrapper
23+
appId="660f13367c18a91b174fe96d"
24+
/>
10625

107-
<style jsx global>{`
108-
html,
109-
body {
110-
padding: 0;
111-
margin: 0;
112-
font-family:
113-
-apple-system,
114-
BlinkMacSystemFont,
115-
Segoe UI,
116-
Roboto,
117-
Oxygen,
118-
Ubuntu,
119-
Cantarell,
120-
Fira Sans,
121-
Droid Sans,
122-
Helvetica Neue,
123-
sans-serif;
124-
}
125-
* {
126-
box-sizing: border-box;
127-
}
128-
`}</style>
12926
</div>
13027
);
13128
}

0 commit comments

Comments
 (0)