Skip to content

Commit b26d6d6

Browse files
author
Matej Lednicky
committed
feat: Add Next.js demo (with server side rendering)
1 parent 2dccceb commit b26d6d6

26 files changed

+2732
-85
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ coverage
4949
# nodemon
5050
.monitor
5151

52+
.next
53+
out
5254
dist
5355
build
5456
node_modules

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,5 @@ Demos:
1717

1818
- [HTML](./packages/demo-html)
1919
- [Webpack](./packages/demo-webpack)
20+
- [React](./packages/demo-react)
21+
- [Next.js](./packages/demo-nextjs)

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"jest": "^26.6.3",
4040
"lerna": "^3.22.1",
4141
"mini-css-extract-plugin": "^1.3.7",
42+
"next": "10.0.7",
4243
"node-sass": "^5.0.0",
4344
"postcss-loader": "^5.0.0",
4445
"prettier": "^2.2.1",

‎packages/demo-html/public/popup-html.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</style>
1313
</head>
1414
<body>
15-
<button id="button" data-tf-popup="moe6aa" data-tf-medium="unit-test">toggle</button>
15+
<button data-tf-popup="moe6aa" data-tf-medium="demo-test">toggle</button>
1616
<script src="./lib/embed-next.js"></script>
1717
</body>
1818
</html>

‎packages/demo-html/public/popup-js.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<button id="button">toggle</button>
1717
<script src="./lib/embed-next.js"></script>
1818
<script>
19-
const { open, close } = window.tf.createPopup("moe6aa", { medium: "unit-test" });
19+
const { open, close } = window.tf.createPopup("moe6aa", { medium: "demo-test" });
2020
document.getElementById("button").onclick = function () {
2121
const isOpen = !!document.querySelector(".typeform-popup");
2222
isOpen ? close() : open();

‎packages/demo-html/public/slider-html.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@
1212
</style>
1313
</head>
1414
<body>
15-
<button id="button" data-tf-slider="moe6aa" data-tf-medium="unit-test">toggle right (default)</button>
16-
<button data-tf-slider="moe6aa" data-tf-medium="unit-test" data-tf-position="left">toggle left</button>
15+
<button id="button" data-tf-slider="moe6aa" data-tf-medium="demo-test">toggle right (default)</button>
16+
<button id="button-left" data-tf-slider="moe6aa" data-tf-medium="demo-test" data-tf-position="left">
17+
toggle left
18+
</button>
1719
<script src="./lib/embed-next.js"></script>
1820
</body>
1921
</html>

‎packages/demo-html/public/slider-js.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717
<button id="button-left">toggle left</button>
1818
<script src="./lib/embed-next.js"></script>
1919
<script>
20-
const sliderRight = window.tf.createSlider("moe6aa", { medium: "unit-test" });
20+
const sliderRight = window.tf.createSlider("moe6aa", { medium: "demo-test" });
2121
document.getElementById("button").onclick = function () {
2222
const isOpen = !!document.querySelector(".typeform-slider");
2323
isOpen ? sliderRight.close() : sliderRight.open();
2424
};
2525

26-
const sliderleft = window.tf.createSlider("moe6aa", { medium: "unit-test" });
26+
const sliderleft = window.tf.createSlider("moe6aa", { medium: "demo-test" });
2727
document.getElementById("button-left").onclick = function () {
2828
const isOpen = !!document.querySelector(".typeform-slider");
2929
isOpen ? sliderleft.close() : sliderleft.open();

‎packages/demo-html/public/widget-html.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@
1515
<div
1616
id="wrapper"
1717
data-tf-widget="moe6aa"
18-
data-tf-medium="unit-test"
18+
data-tf-medium="demo-test"
1919
data-tf-transitive-search-params="foo,bar"
20-
data-tf-source="localhost"
2120
></div>
2221
<script src="./lib/embed-next.js"></script>
2322
</body>

‎packages/demo-html/public/widget-js.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@
1818
<script>
1919
window.tf.createWidget("moe6aa", {
2020
container: document.getElementById("wrapper"),
21-
source: "localhost",
2221
transitiveSearchParams: ["foo", "bar"],
23-
medium: "unit-test",
22+
medium: "demo-test",
2423
});
2524
</script>
2625
</body>

‎packages/demo-nextjs/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Next.js App Demo
2+
3+
Typeform can be embedded in server-side rendered Next.js apps.
4+
5+
**Note:** We recommend using `@typeform/embed-react`, it will be rady soon :)
6+
7+
You can use the `@typeform/embed` directly in Next.js apps:
8+
9+
```javascript
10+
import { createWidget } from "@typeform/embed";
11+
import "@typeform/embed/build/css/widget.css"; // import necessary CSS
12+
13+
const MyTypeformEmbed = () => {
14+
const container = useRef();
15+
16+
useEffect(() => {
17+
createWidget("<form id>", { container: container.current });
18+
}, []);
19+
20+
return <div ref={container} />;
21+
};
22+
```
23+
24+
Use `yarn start` to run the demo in browser: http://localhost:8080

0 commit comments

Comments
 (0)